Core Concepts

Responsive design

Change styles based on device and viewport.

Overview

Every Sfumato utility class can be applied conditionally at different media breakpoints, which makes it easy to build responsive interfaces right in your HTML.

To ensure things work across breakpoints (e.g. on mobile), make sure you've configured the viewport meta tag in the <head> block of your document:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

To add a style that only takes effect at a specific breakpoint, just prefix the utility name with the breakpoint name, followed by a colon:

<div class="block md:hidden ...">
    Only visible on mobile!
</div>

@media (width >= 48rem) {
    .md\:hidden {
        display: none;
    }
}

These work for every utility class in the Sfumato framework, which means you can change any styles at a given breakpoint.

Ranges

Styles applied by rules like md:grid-cols-3 will apply at that breakpoint and stay applied at wider breakpoints.

If you need to apply a utility for a specific breakpoint range, stack a responsive variant like md with a max-* variant to limit that style to a specific range:

<div class="hidden md:max-lg:block ...">
    Only visible on tablets!
</div>

@media (width >= 48rem) and (width < 64rem) {
    .md\:max-lg\:block {
        display: block;
    }
}

Container queries can also be specified with ranges:

<div class="@container ...">
    <div class="@sm:@max-lg:bg-fuchsia-500 ...">
        <!-- ... -->
    </div>
</div>

@container (width >= 24rem) and (width < 32rem) {
    .\@sm\:\@max-lg\:bg-fuchsia-500 {
        background-color: var(--color-fuchsia-500);
    }
}

Classic breakpoints

There are five default breakpoints with width values representing common device resolutions:

Breakpoint Target size CSS

sm

40rem (~640px)

@media (width >= 40rem)

md

48rem (~768px)

@media (width >= 48rem)

lg

64rem (~1024px)

@media (width >= 64rem)

xl

80rem (~1280px)

@media (width >= 80rem)

2xl

96rem (~1536px)

@media (width >= 96rem)

Adaptive breakpoints

There are seven default adaptive breakpoints with aspect-ratio values representing common device aspect ratios, for more specific targeting:

Breakpoint Target size CSS

mobi

mobile phones

@media (min-aspect-ratio: 0.6249)

phab

phablets

@media (min-aspect-ratio: 0.575)

tabp

tablets (portrait)

@media (min-aspect-ratio: 0.625)

tabl

tablets (landscape)

@media (min-aspect-ratio: 1.0)

desk

desktops

@media (min-aspect-ratio: 1.5)

wide

wide screens

@media (min-aspect-ratio: 1.7777)

vast

ultrawide screens

@media (min-aspect-ratio: 2.3333)

Container breakpoints

Container queries are a newer addition to CSS that allow you to apply styles depending on the dimensions of a parent element rather than the whole browser window. This means you can create components that adapt their appearance to the specific space they occupy, making them more flexible and easier to reuse in different layouts.

<div class="@container">
    <div class="grid @md:grid-cols-3">
        <!-- ... -->
    </div>
</div>

You can also name your containers for more specific targeting, like when nested.

<div class="@container/main">
    <div class="grid @md/main:grid-cols-3">
        <!-- ... -->
    </div>
</div>

Base container sizes

Breakpoint Target size CSS

@3xs

16rem (~256px)

@container (width >= 16rem)

@2xs

18rem (~288px)

@container (width >= 18rem)

@xs

20rem (~320px)

@container (width >= 20rem)

@sm

24rem (~384px)

@container (width >= 24rem)

@md

28rem (~448px)

@container (width >= 28rem)

@lg

32rem (~512px)

@container (width >= 32rem)

@xl

36rem (~576px)

@container (width >= 36rem)

@2xl

42rem (~672px)

@container (width >= 42rem)

@3xl

48rem (~768px)

@container (width >= 48rem)

@4xl

56rem (~896px)

@container (width >= 56rem)

@5xl

64rem (~1024px)

@container (width >= 64rem)

@6xl

72rem (~1152px)

@container (width >= 72rem)

@7xl

80rem (~1280px)

@container (width >= 80rem)

Quick Reference

Standard media queries

Following are all available standard @media query variants, including max varieties:

Breakpoint Target size CSS

sm

40rem (~640px)

@media (width >= 40rem)

max-sm

40rem (~640px)

@media (width < 40rem)

md

48rem (~768px)

@media (width >= 48rem)

max-md

48rem (~768px)

@media (width < 48rem)

lg

64rem (~1024px)

@media (width >= 64rem)

max-lg

64rem (~1024px)

@media (width < 64rem)

xl

80rem (~1280px)

@media (width >= 80rem)

max-xl

80rem (~1280px)

@media (width < 80rem)

2xl

96rem (~1536px)

@media (width >= 96rem)

max-2xl

96rem (~1536px)

@media (width < 96rem)

motion-safe

@media (prefers-reduced-motion: no-preference)

motion-reduced

@media (prefers-reduced-motion: reduce)

portrait

@media (orientation: portrait)

landscape

@media (orientation: landscape)

print

@media print

dark

@media (prefers-color-scheme: dark)

Adaptive media queries

Following are all available adaptive design @media query variants, including max varieties:

Breakpoint Target size CSS

mobi

mobile phones

@media (min-aspect-ratio: 0.6249)

max-mobi

mobile phones

@media (max-aspect-ratio: 0.6248)

phab

phablets

@media (min-aspect-ratio: 0.575)

max-phab

mobile phones

@media (max-aspect-ratio: 0.5749)

tabp

tablets (portrait)

@media (min-aspect-ratio: 0.625)

max-tabp

mobile phones

@media (max-aspect-ratio: 0.6249)

tabl

tablets (landscape)

@media (min-aspect-ratio: 1.0)

max-tabl

mobile phones

@media (max-aspect-ratio: 0.9999)

desk

desktops

@media (min-aspect-ratio: 1.5)

max-desk

mobile phones

@media (max-aspect-ratio: 1.4999)

wide

wide screens

@media (min-aspect-ratio: 1.7777)

max-wide

mobile phones

@media (max-aspect-ratio: 1.7776)

vast

ultrawide screens

@media (min-aspect-ratio: 2.3333)

max-vast

mobile phones

@media (max-aspect-ratio: 2.3331999999999997)

Container media queries

Following are all available @container query variants, including max varieties:

Breakpoint Target size CSS

@3xs

16rem (~256px)

@container (width >= 16rem)

@max-3xs

16rem (~256px)

@container (width < 16rem)

@2xs

18rem (~288px)

@container (width >= 18rem)

@max-2xs

18rem (~288px)

@container (width < 18rem)

@xs

20rem (~320px)

@container (width >= 20rem)

@max-xs

20rem (~320px)

@container (width < 20rem)

@sm

24rem (~384px)

@container (width >= 24rem)

@max-sm

24rem (~384px)

@container (width < 24rem)

@md

28rem (~448px)

@container (width >= 28rem)

@max-md

28rem (~448px)

@container (width < 28rem)

@lg

32rem (~512px)

@container (width >= 32rem)

@max-lg

32rem (~512px)

@container (width < 32rem)

@xl

36rem (~576px)

@container (width >= 36rem)

@max-xl

36rem (~576px)

@container (width < 36rem)

@2xl

42rem (~672px)

@container (width >= 42rem)

@max-2xl

42rem (~672px)

@container (width < 42rem)

@3xl

48rem (~768px)

@container (width >= 48rem)

@max-3xl

48rem (~768px)

@container (width < 48rem)

@4xl

56rem (~896px)

@container (width >= 56rem)

@max-4xl

56rem (~896px)

@container (width < 56rem)

@5xl

64rem (~1024px)

@container (width >= 64rem)

@max-5xl

64rem (~1024px)

@container (width < 64rem)

@6xl

72rem (~1152px)

@container (width >= 72rem)

@max-6xl

72rem (~1152px)

@container (width < 72rem)

@7xl

80rem (~1280px)

@container (width >= 80rem)

@max-7xl

80rem (~1280px)

@container (width < 80rem)

Hover and other states

Dark theme

Core Concepts

Responsive design

Overview

Ranges

Classic breakpoints

Adaptive breakpoints

Container breakpoints

Base container sizes

Quick Reference

Standard media queries

Adaptive media queries

Container media queries

Sfumato

Community