Custom Syntax

Media Queries

Customizing media queries and breakpoints for your design system.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

export default {
mediaQueries: {
mobile: 600,
tablet: 1024,
desktop: 1440,
watch: '(max-device-width:42mm) and (min-device-width:38mm)'
}
}

Apply your custom media queries:

<div class="font:24@mobile font:36@table font:48@desktop text:center@watch"></div>

Check out the responsive design to learn about responsive syntax.


Basic usage

🚧


Customization

🚧


Default

BreakpointWidthDevices
4xs360pxiPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One…
3xs480pxBlackberry Passport / Amazon Kindle Fire HD 7…
2xs600pxLG G Pad 8.3 / Amazon Kindle Fire …
xs768pxMicrosoft Surface / iPad Pro 9.7 / iPad Mini …
sm834pxiPad Air 10.5 / iPad Pro 11 …
md1024pxiPad Pro 12.9 / Microsoft Surface Pro 3 …
lg1280pxGoogle Chromebook Pixel / Samsung Chromebook …
xl1440pxMacbook Air 2020 M1 / MacBook Pro 15 …
2xl1600pxDell Inspiron 14 series …
3xl1920pxDell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch …
4xl2560pxDell UltraSharp U2711 / Apple iMac 27-inch …

View the full source code

PREVIOUS
Functions

Customizing functions for your design system.

NEXT
Rules

Customizing syntax rules for your design system.

MIT License © Aoyue Design LLC.