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

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

TokenSizeDevices
4xs
360px
iPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One…
3xs
480px
Blackberry Passport / Amazon Kindle Fire HD 7…
2xs
600px
LG G Pad 8.3 / Amazon Kindle Fire …
xs
768px
Microsoft Surface / iPad Pro 9.7 / iPad Mini …
sm
834px
iPad Air 10.5 / iPad Pro 11 …
md
1024px
iPad Pro 12.9 / Microsoft Surface Pro 3 …
lg
1280px
Google Chromebook Pixel / Samsung Chromebook …
xl
1440px
Macbook Air 2020 M1 / MacBook Pro 15 …
2xl
1600px
Dell Inspiron 14 series …
3xl
1920px
Dell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch …
4xl
2560px
Dell UltraSharp U2711 / Apple iMac 27-inch …

View the full source code

Custom Syntax
Functions

Customizing functions for your design system.

Custom Syntax
Rules

Customizing syntax rules for your design system.

© Aoyue Design LLC.