The clamp() function takes three values: a minimum, a preferred value and a maximum. The result grows with the screen but never goes below the minimum or above the maximum. It replaces many media queries.

Syntax

font-size: clamp( minimum, preferred, maximum );

Fluid font size

h1 {
    font-size: clamp( 2rem, 5vw, 4rem );
}

p {
    font-size: clamp( 1rem, 0.9rem + 0.5vw, 1.25rem );
}

Using rem plus a viewport unit keeps the text scalable when the user changes the browser font size.

Fluid spacing

.lotgrafix-section {
    padding: clamp( 40px, 8vw, 120px ) clamp( 16px, 4vw, 48px );
}

Fluid container width

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

Related functions

• min(): returns the smallest value. Example: width: min( 100%, 600px ).
• max(): returns the largest value. Example: width: max( 50%, 300px ).