Responsive Design

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. Viewport queries use breakpoint tokens, while container queries use container size tokens.

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 viewport widths—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 breakpoint theme token, 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 utilities {    @media (width>=52.125rem) and (width<=64rem) {        .hidden\@sm\&\<\=md {            display: none        }    }}

Creating responsive wrappers

Set fixed maximum widths from the container scale when a wrapper should step through product layout widths.

<div class="max-w:4xl@sm max-w:5xl@md max-w:7xl@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 utilities {    .container {        container-type: inline-size    }    @container (width<=18rem) {        .flex-col\@container\(\<\=2xs\) {            flex-direction: column        }    }}

Container queries use the container scale, which can use different values from viewport breakpoints.

Querying container ranges

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

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

@layer utilities {    @container ((width>=24rem) and (width<=28rem)) {        .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 utilities {    .container\:card\/inline-size {        container: card/inline-size    }    @container card (width>=16rem) {        .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 viewports, such as mobile phones and tablets, and then gradually expanding to larger viewports, 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:2xl">

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:2xl font:3xl@md …"> <p class="font:2xl font:3xl@>=md …">

@layer theme {    :root {        --font-size-2xl: 1.5rem;        --font-size-3xl: 2rem    }}@layer utilities {    .font\:2xl {        font-size: var(--font-size-2xl)    }    @media (width>=64rem) {        .font\:3xl\@md {            font-size: var(--font-size-3xl)        }    }}

• 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 viewports, such as desktop computers, and then gradually scaling down to smaller viewports, 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:3xl">

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:3xl font:2xl@<md …">

@layer theme {    :root {        --font-size-3xl: 2rem;        --font-size-2xl: 1.5rem    }}@layer utilities {    .font\:3xl {        font-size: var(--font-size-3xl)    }    @media (width<64rem) {        .font\:2xl\@\<md {            font-size: var(--font-size-2xl)        }    }}

• 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.