Docs :: Media Queries

Dimensions

Variations

Using the md dimension as an example:

Examples

The -phone variant is available from xxs through lg (there is no xl-phone or xxl-phone).

Recommended responsive setup

If you search online for the best approach to responsive design and setting up your breakpoints, you’ll come across 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 your design will work great on small screens 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 */
  }
}

These map to the prefers-* and related media features, so you can respect user settings without memorizing the syntax:

Example

These are used like any other custom media query, and they can be combined with each other or with a dimension token:

.exampleComponent {
  @media (--landscape) and (--touch) {
    /* a phone or tablet held sideways */
  }
}

Without PostCSS plugins, the same thing spelled out:

.exampleComponent {
  @media (orientation: landscape) and ((hover: none) and (pointer: coarse)) {
    /* a phone or tablet held sideways */
  }
}