響應式設計

Adapt your user interface to different devices with flexible responsive syntax.

Overview

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

Master CSS allows for the conditional application of styles at different viewport and container sizes, with up to 11 predefined screen sizes available, from 4xs ~ 4xl.

This comprehensive coverage caters to the modern web layout scenario.

Based on viewport breakpoints

CSS Media Queries allow styles to be applied based on the size of the viewport rather than individual elements. This makes it possible to create responsive layouts that adapt to different screen sizes—such as mobile phones, tablets, and desktops—by defining breakpoints at specific widths.

These breakpoints enable developers to change layouts, typography, spacing, and more to ensure an optimal user experience across devices.

Using responsive breakpoints

The syntax is @<breakpoint>, where <breakpoint> can be any of the predefined screen sizes, such as xs, sm, md, lg, etc.

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

Querying viewport ranges

Use comparison and logical operators to create more complex viewport range queries.

<div class="hidden@sm&<=md">…</div>

@layer base, theme, preset, components, general;@layer general {    @media (width>=52.125rem) and (width<=64rem) {        .hidden\@sm\&\<\=md {            display: none        }    }}

Creating responsive wrappers

Fixed element width to a screen size as a responsive wrapper.

<div class="max-w:screen-sm@sm max-w:screen-md@md max-w:screen-lg@lg …">…</div>

Based on container sizes

CSS Container Queries allow styles to be applied based on the size of a container, rather than the size of the viewport. This makes it easier to build responsive components that adapt to their parent containers.

Using container queries

The container class is a utility class that applies the container-type: inline-size; to the element, making it a @container(<size>) for container queries.

Try making the container smaller.

Lorem ipsum

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<div class="container …">    <div class="flex flex:col@container(<=2xs)">…</div></div>

@layer base, theme, preset, components, general;@layer general {    .container {        container-type: inline-size    }    @container (width<=37.5rem) {        .flex\:col\@container\(\<\=2xs\) {            flex-direction: column        }    }}

Container queries and media queries share the same screen sizes.

Querying container ranges

Use comparison and logical operators to create more complex container range queries.

<div class="hidden@container(sm&<=md)">…</div>

@layer base, theme, preset, components, general;@layer general {    @container ((width>=52.125rem) and (width<=64rem)) {        .hidden\@container\(sm\&\<\=md\) {            display: none        }    }}

Creating named containers

Use the container:<name>/<type> to create a named container with a specific type, and then use the @container(<name>) query to apply styles based on the size of a named container.

<div class="container:card/inline-size">    <div class="hidden@card(3xs)"></div></div>

@layer base, theme, preset, components, general;@layer general {    .container\:card\/inline-size {        container: card/inline-size    }    @container card (width>=30rem) {        .hidden\@card\(3xs\) {            display: none        }    }}

Strategies

When it comes to designing and developing responsive web pages, mobile-first and desktop-first are two common development strategies. The decision between these two strategies depends on your project requirements, target audience, and operational decisions.

Also, we propose another flexible strategy － Syntax-first.

Mobile-first

The mobile-first strategy is a design and development approach that initially focuses on designing and optimizing for smaller screen sizes, such as mobile phones and tablets, and then gradually expanding to larger screen sizes, including desktop computers.

For example, your company is launching a game primarily targeting mobile users with potential future releases for desktop users based on market response; adopting a mobile-first strategy would be ideal at this stage.

In mobile-first, styles not bound by viewports are considered to define the mobile UI.

<p class="font:24">

Gradually adjust the UI for larger viewports.

Increase the font size to 32/16rem when the viewport width is larger than 1024/16rem.

<p class="font:24 font:32@md …"> <p class="font:24 font:32@>=md …">

@layer base, theme, preset, components, general;@layer general {    .font\:24 {        font-size: 1.5rem    }    @media (width>=64rem) {        .font\:32\@md {            font-size: 2rem        }    }}

• Paragraph font size is 24/16rem in viewport <1024/16rem
• Paragraph font size is 32/16rem in viewport >=1024/16rem

This relies on CSS precedence behavior to override mobile styles with new styles on larger viewports.

Desktop-first

On the other hand, the Desktop-first development strategy initially prioritizes designing and optimizing for larger screen sizes, such as desktop computers and then gradually scaling down to smaller screen sizes, like mobile phones and tablets.

For example, your company is launching a web drawing software primarily targeting designers with potential future releases for mobile users based on market response; adopting a desktop-first strategy would be ideal at this stage.

In desktop-first, styles not bound by viewports are considered to define the desktop UI.

<p class="font:32">

Gradually adjust the UI for smaller viewports.

Decrease the font size to 24/16rem when the viewport width is less than 1024/16rem.

<p class="font:32 font:24@<md …">

@layer base, theme, preset, components, general;@layer general {    .font\:32 {        font-size: 2rem    }    @media (width<64rem) {        .font\:24\@\<md {            font-size: 1.5rem        }    }}

• Paragraph font size is 24/16rem in viewport <1024/16rem
• Paragraph font size is 32/16rem in viewport >=1024/16rem

This relies on CSS precedence behavior to override mobile styles with new styles on larger viewports.

Syntax-first

Thanks to the syntactic flexibility of Master CSS, free yourself from the constraints of mobile-first or desktop-first, which not only gives you a better development experience but also makes you have less markup and less CSS output.

For example, set the background to white only on mobile.

With mobile-first, it's necessary to revert to the original background on larger viewports.

<div class="bg:white bg:transparent@md …">

Add @<md directly to restrict to small viewports.

<div class="bg:white@<md …">

For example, set the background to white only on the desktop.

With desktop-first, it's necessary to revert to the original background on smaller viewports.

<div class="bg:white bg:transparent@<md …">

Add @md directly to restrict to large viewports.

<div class="bg:white@md …">

You don't need to waste energy sticking to a specific development strategy; use the most direct way to solve the current responsive layout.