References

Media Queries

class	description
`@all`	Suitable for all devices.
`@print`	Intended for paged material and documents viewed on a screen in print preview mode.
`@screen`	Intended primarily for screens.
`@portrait`	The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.
`@landscape`	The viewport is in a landscape orientation, i.e., the width is greater than the height.
`@motion`	Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.
`@reduced-motion`	Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.
`@media(any-hover:hover)`	Test whether any available input mechanism can hover over elements.
`@media(any-pointer:coarse)`	At least one input mechanism includes a pointing device of limited accuracy.
`@media(any-pointer:fine)`	At least one input mechanism includes an accurate pointing device.
`@media(hover:hover)`	Test whether the user's primary input mechanism can hover over elements.
`@media(pointer:coarse)`	The primary input mechanism includes a pointing device of limited accuracy.
`@media(pointer:fine)`	The primary input mechanism includes an accurate pointing device.
`@media(aspect-ratio:1/1)`	Test the aspect ratio of the viewport. 1/1 is an arbitrary value.
`@media(color)`	Test the number of bits per color component (red, green, blue) of the output device.
`@media(display-mode:fullscreen)`	All of the available display area is used and no user agent chrome is shown.
`@media(display-mode:standalone)`	The application will look and feel like a standalone application.
`@media(display-mode:minimal-ui)`	The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation.
`@media(display-mode:browser)`	The application opens in a conventional browser tab or new window, depending on the browser and platform.
`@media(grid:value)`	Test whether the output device uses a grid-based screen. value is an arbitrary value.
`@media(height:size)`	Apply styles based on the height of the viewport. size is an arbitrary value.
`@media(max-height:size)`	Apply styles based on the max height of the viewport. size is an arbitrary value.
`@media(min-height:size)`	Apply styles based on the min height of the viewport. size is an arbitrary value.
`@media(width:size)`	Apply styles based on the width of the viewport. size is an arbitrary value.
`@media(max-width:size)`	Apply styles based on the max width of the viewport. size is an arbitrary value.
`@media(min-width:size)`	Apply styles based on the min width of the viewport. size is an arbitrary value.
`@media(monochrome)`	Test the number of bits per pixel in the monochrome frame buffer of the output device.
`@media(prefers-color-scheme:light)`	Indicates that user has notified that they prefer an interface that has a light theme, or has not expressed an active preference.
`@media(prefers-color-scheme:dark)`	Indicates that user has notified that they prefer an interface that has a dark theme.
`@media(prefers-reduced-motion)`	Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.

Overview

You may want to display screen with special devices, such as printers or audio-based screen readers. Master uses an intelligent matching algorithm to make all styles support CSS media queries.

Basic usage

Print Format

Let your page is stylized for print layout.

<div class="hide@print">Hide on print mode</div>

Orientation

Set image aspect-ratio:2/1 in landscape (horizontal)
Set image aspect-ratio:1/1 in landscape (vertical)

<div class="aspect:2/1@landscape aspect:1/1@portrait"></div>

It will be automatically detected, don’t use this on the classes.

Animations effect work on @motion preferences by default. If the user requested that the system minimize the amount of non-essential motion it uses, it will work like @reduced-motion.

<div class="">

@motion

@reduced-motion

Color Scheme Preference

For better user experience, most APPs provide color schemes switching in personal settings or pages. However, it’s impossible to override the user’s preferred color schemes through js, and it is impossible for developers to implement pure CSS through prefers-color-scheme:dark.
Therefore, Master provides you with a solution.

See Color Schemes documentation for learning more.

Responsive breakpoints

Master provides a systematic breakpoints API for you to implement responsive breakpoints using standard media queries like font:24@media(min-width:1024px).

See Breakpoints documentation for learning more.

Hello world

.font\:heavy {
    font-weight: 900
}

@media print {
    .hide\@print {
        display: none
    }
}

@media (min-width:1024px) {
    .font\:24\@md {
        font-size: 1.5rem
    }
}

automatically