cssresponsive-designresponsiveclamp

CSS clamp function formula for font-size


How can I use the clamp function, for my h1 element, to change the font-size responsive with specific requirements.

h1 { font-size: clamp(min, ???, max); }

Only from a screen width of 576px should "clamp" increase the size of the font proportionally/responsive up to a screen width of 1200px.

@media (min-width: 576px) 
{
    h1 { font-size: clamp(32.44px, ???, 61.04px); }

}

Is there a formula to calculate the green area in the picture?

enter image description here


Solution

  • slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)

    yAxisIntersection = -minWidth * slope + minFontSize

    preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]


    On this Website, I found the formula to calculate the value for clamp.

    Linearly Scale font-size with CSS clamp() Based on the Viewport


    The calculation example for my situation:


    Temani Afif found a website where you can calculate the value. Font-size Clamp Generator