Customization
Customizing Screen Sizes
A guide to adding custom screen sizes for breakpoints, containers, and variables.
Overview
| At | Variable | Value | Description | |
|---|---|---|---|---|
@4xs | screen-4xs | 360 | (22.5rem) | iPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One… |
@3xs | screen-3xs | 480 | (30rem) | Blackberry Passport / Amazon Kindle Fire HD 7… |
@2xs | screen-2xs | 600 | (37.5rem) | LG G Pad 8.3 / Amazon Kindle Fire … |
@xs | screen-xs | 768 | (48rem) | Microsoft Surface / iPad Pro 9.7 / iPad Mini … |
@sm | screen-sm | 834 | (52.125rem) | iPad Air 10.5 / iPad Pro 11 … |
@md | screen-md | 1024 | (64rem) | iPad Pro 12.9 / Microsoft Surface Pro 3 … |
@lg | screen-lg | 1280 | (80rem) | Google Chromebook Pixel / Samsung Chromebook … |
@xl | screen-xl | 1440 | (90rem) | Macbook Air 2020 M1 / MacBook Pro 15 … |
@2xl | screen-2xl | 1600 | (100rem) | Dell Inspiron 14 series … |
@3xl | screen-3xl | 1920 | (120rem) | Dell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch … |
@4xl | screen-4xl | 2560 | (160rem) | Dell UltraSharp U2711 / Apple iMac 27-inch … |
In Master CSS, the screen sizes are simultaneously used as responsive breakpoints, screen size variables, and container query sizes.
export default { screens: { md: 1024, lg: 1280, }}For example, a screen size token can be used in the following ways:
<div class="font:32@md">…</div><div class="max-w:screen-md">…</div><div class="hidden@container(md)">…</div>Basic usage
Add a screen size
Add a screen size token to config.screens.
export default { screens: { md: 1024, }}Apply the screen size screen-md as a variable:
<div class="w:screen-md">…</div>Apply the screen size @md as a responsive breakpoint:
<div class="font:32@md">…</div>Apply the screen size (md) as a container query:
<div class="hidden@container(md)">…</div>