Breakpoints
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, thenfont:12will apply to small devices andfont:24@smwill 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 …
