Skip to content

Docs :: Media Queries

File name Source
settings.media-queries.css Github

Available Media Queries

Dimensions

Token keyword Dimension (px)
xxs 0-240
xs 240-360
sm 360-480
md 480-768
lg 768-1024
xl 1024-1440
xxl 1440-1920

Variations

Using the md dimension as an example:

Token variation Matches
--md-only exact range
--md-n-above range top and above
--md shorthand for --md-n-above
--md-n-below range top and below
--md-phone exact range in portrait only

Examples

Custom media query Value
@media(--md-only) {} (480px <= width < 768px);
@media(--md) {} (width >= 768px);
@media(--md-n-above) {} (width >= 768px);
@media(--md-n-below) {} (width <section 768px);
@media(--md-phone) {} (--md-only) and (--portrait);

If you search online for the best approach to responsive design and setting up your breakpoints, you’ll come accross the technically true but useless “it depends” answer.

Unless you have a good reason not to, you should use a mobile first approach. What that means is you design will work great on small screen out of the box, without any media queries, and then you add your tweaks for additional sizes.

This is how the CSS of most responsive components should be set up:

.exampleComponent {
  /* default mobile */
  @media (--lg) {
    /* responsive tweaks for desktop */
  }
}

Without PostCSS plugins:

.exampleComponent {
  /* default mobile */
  @media (width >= 1024px) {
    /* responsive tweaks for desktop */
  }
}