References

Breakpoints

classpropertiesdescription
@3xs@media (min-width: 360px) { }

iPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One…

@2xs@media (min-width: 480px) { }

Blackberry Passport / Amazon Kindle Fire HD 7 …

@xs@media (min-width: 600px) { }

LG G Pad 8.3 / Amazon Kindle Fire …

@sm@media (min-width: 768px) { }

Microsoft Surface / iPad Pro 9.7 / iPad Mini …

@md@media (min-width: 1024px) { }

iPad Pro 12.9 / Microsoft Surface Pro 3 …

@lg@media (min-width: 1280px) { }

Google Chromebook Pixel / Samsung Chromebook …

@xl@media (min-width: 1440px) { }

Macbook Air 2020 M1 / MacBook Pro 15 …

@2xl@media (min-width: 1600px) { }

Dell Inspiron 14 series …

@3xl@media (min-width: 1920px) { }

Dell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch …

@4xl@media (min-width: 2560px) { }

Dell UltraSharp U2711 / Apple iMac 27-inch …


Overview

Master uses an intelligent matching algorithm to make all styles support responsive breakpoints.
You hardly need to think or sort your media rules in CSS because the Master rules engine intelligently sorts your media rules based on breakpoints and ranges.

Basic usage

Responsive styles

<body class="text:center@xs">...</body>

Operators

Operators : <, <=, <, <=

<div class="font:16@<xs">...</div>
<div class="font:16@<=xs">...</div>
<div class="font:16@xs">...</div>
<div class="font:16@>xs">...</div>
<div class="font:16@>=xs">...</div>

Ranges

This can be very useful sometimes when you need to fine-tune styles for a specific viewport range of devices.

<div class="font:16@xs&<sm">...</div>

Arbitrary

If no unit is set, regarded as px automatically.
Sometimes you need to fine-tune the layout for a specific viewport size, in which case you can use a one-time arbitrary value.

<div class="font:16@<789">...</div>per
<div class="font:16@<=789">...</div>
<div class="font:16@>=789">...</div>
<div class="font:16@>789">...</div>

Javascript programming

Conditionally apply with breakpoints

import { breakpoints } from '@master/css';

if (window.innerWidth >= breakpoints.md) {
    // ... 
}

Design Pattern

Non-breakpoint styles will apply to all devices.
On the premise that the viewport width is at least 0, and the viewport size will only grow in the future, taking font-size as an example:

  • Set an element with font:12, which will apply to all devices.

  • Set an element with font:12 font:24@sm, then font:12 will apply to small devices and font:24@sm will apply to devices with viewport >=576px.

You can observe that after adding other sizes with breakpoints to font-size, the original non-breakpoint size will be relocated for small devices, which is the behavior of mobile-first design.

Launch business from mobile

Stack styles by breakpoints from small to large.

1 column on iPhone SE

<div class="grid-cols:1 "></div>

and 2 columns on iPhone 6, 7, 8, X

<div class="grid-cols:1 grid-cols:2@3xs "></div>

and 3 columns on Kindle Fire HD 7

<div class="grid-cols:1 grid-cols:2@3xs grid-cols:3@2xs "></div>

and 4 columns on Kindle Fire

<div class="grid-cols:1 grid-cols:2@3xs grid-cols:3@2xs grid-cols:4@xs "></div>

and 5 columns on iPad Pro 9.7

<div class="grid-cols:1 grid-cols:2@3xs grid-cols:3@2xs grid-cols:4@xs grid-cols:5@sm "></div>

and so on …

Launch from desktop

Set breakpoints for styles from large to small.

Your beginning is 6 columns for iMac 27

<div class="grid-cols:6 "></div>

Now, explicitly designate 6 columns for iMac 27

<div class="grid-cols:6@4xl "></div>

and 5 columns on Dell XPS 13

<div class="grid-cols:6@4xl grid-cols:5@3xl "></div>

and 4 columns on Dell Inspiron 14 series

<div class="grid-cols:6@4xl grid-cols:5@3xl grid-cols:4@2xl "></div>

and 3 columns on Macbook Air 2020

<div class="grid-cols:6@4xl grid-cols:5@3xl grid-cols:4@2xl grid-cols:3@xl "></div>

and so on …


© Aoyue Design LLC.
Issue on this page
Edited byAronLola