Get Your Audit

EN

RU

Soon

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
    );
  }
}