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); |
Recommended responsive setup
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:
<style>
.exampleComponent {
/* default mobile */
@media (--lg) {
/* responsive tweaks for desktop */
}
}
</style>
<div class="exampleComponent">[…]</div>