Clamp() Generator
Easily set up a fluid layout. Pick a screen range and two sizes — copy one line of CSS instead of a stack of media queries.
Your sizes
Bonus: screens wider than 1920px.
Past 1920px most layouts just float in empty space. This snippet grows the root font size with the screen, so everything set in rem scales with it — capped at 40px for 8K.
/* Scaling for ultra-wide screens (>1920px) */
@media screen and (min-width: 1921px) {
:root {
/*
Growth multiplier.
0.00833 — strict proportion (1/120 of the width).
0.006 — soft, discreet increase.
*/
--zoom-speed: 0.00833;
}
html {
/*
1. 1rem — a base that picks up the user's font settings.
2. calc(...) — calculates the increment based on how much the screen is wider than 1920px.
3. clamp(...) — limits the growth (min: 1rem, max: 2.5rem/40px for 8K).
*/
font-size: clamp(
1rem,
calc(1rem + (100vw - 1920px) * var(--zoom-speed)),
2.5rem
);
}
}How the math works.
A straight line between two points. That's all clamp() is doing here.
-
Find the slope
slope = (maxSize − minSize) / (maxWidth − minWidth)How much the size grows for every pixel of screen width.
-
Find the start
start = minSize − minWidth × slopeWhere that line would begin on a 0px-wide screen.
-
Lock both ends
clamp(min, start + slope × 100vw, max)rem keeps browser zoom working, vw does the growing, clamp() stops it at the edges.