Black Lives Matter! ✊🏾

clamp()

The clamp() function takes three calculations—a minimum value, a central value, and a maximum value. 11.2. Comparison Functions: min(), max(), and clamp()

Links about clamp()

  1. Everything I Learned About min(), max(), clamp() In CSS - Ahmad Shadeed

    posted on by iShadeed

    CSS Comparison Functions (min(), max(), clamp()) become supported in Firefox on 8 April 2020, which means that they are now supported in all major browsers. ...

  2. CSS Clamp: The Goldilocks of CSS Math Functions - Steve Fenton

    posted on by Steve Fenton

    There is a problem I have wrestled with a couple of times, which was frustrating to solve... but can now be easily solved using clamp, which is currently in an Editors Draft of the CSS Values and Units Module Level 4 specification. It is sat alongside similar mathmatical CSS

  3. clamp()

    posted on by MDN

    The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be u…

  4. Can I use... Support tables for HTML5, CSS3, etc

    posted on by Can I use

Code sample

.type {
/* Force the font-size to stay between 12px and 100px */
font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}