Clamp( ) Generator
Easily set up a fluid layout
Fluid
Generator
CSS
/* 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
);
}
}