CSS clamp(), min() and max() – responsive sizing without media queries

The problem with media queries

We've all been there: a handful of breakpoints, three overrides for every font size, and somehow it still looks off on a 1400px display. Media queries are powerful – but for many sizing problems, they're simply the wrong tool. clamp(), min() and max() are the more elegant solution.

min() and max() – the basics

Before we get to clamp(), a quick look at the foundations:

min() returns the smallest value from a list:

width: min(600px, 90%);

This means: the width is at most 600px – but never more than 90% of the parent element. No media query needed to constrain an element on small screens.

max() returns the largest value:

font-size: max(16px, 1.2vw);

This means: the font is at least 16px – but scales with the viewport. On small screens the 16px floor kicks in; on large screens the font grows.

clamp() – the best of both worlds

clamp() combines both: a minimum, a preferred value, and a maximum.

clamp(minimum, preferred, maximum)

A concrete example for responsive font size:

font-size: clamp(1rem, 2.5vw, 2rem);

What's happening here?

• Minimum: 1rem – never smaller than 16px
• Preferred: 2.5vw – scales fluidly with the viewport
• Maximum: 2rem – never larger than 32px

The result: a font size that scales completely fluidly between a 320px and 1600px viewport – without a single media query.

Practical examples

Responsive heading

h1 {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
}

Container width that never gets too narrow or too wide

.container {
    width: min(1200px, 90%);
    margin-inline: auto;
}

Responsive padding that scales with the screen

.section {
    padding-block: clamp(2rem, 8vw, 6rem);
}

Image that never gets too large but always fills the available width

img {
    width: min(100%, 800px);
}

When to use which function

Accessibility note for font sizes

Anyone using clamp() for font-size should keep one thing in mind: a hard maximum can violate WCAG 1.4.4 (Resize Text, AA) because it may prevent users from scaling text to 200%. The more robust approach uses a math expression as the preferred value instead of a pure viewport unit:

/* Better for accessibility */
font-size: clamp(1rem, 1rem + 1vw, 2rem);

This keeps the font size relative to the user's base font size – zoom continues to work correctly. Always test the result after zooming in.

Browser support

All three functions have been supported in all modern browsers since 2020 – Chrome, Firefox, Safari, Edge. No polyfill needed, no fallback required.

TL;DR

1. min(a, b) – returns the smallest value → sets an upper limit
2. max(a, b) – returns the largest value → sets a lower limit
3. clamp(min, preferred, max) – fluid scaling with both a floor and a ceiling
4. For responsive font sizes, spacing and container widths these three functions are often more elegant than media queries
5. Full browser support – ready to use today