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. min(), max(), and clamp(): three logical CSS functions to use today

    posted on

    Min, max, and clamp provide some powerful CSS capabilities that enable more responsive styling with fewer liens of code. This post goes over how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS math functions.

  2. 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. ...

  3. 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

  4. 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…

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