CSS clamp() Function
Example
Set the <h1> element's minimum font-size to 2rem, and the maximum font-size to 3.5rem. Also, set the <p> element's minimum font-size to 1rem, and the maximum font-size to 2.5rem:
h1 {
font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
font-size: clamp(1rem, 2.5vw, 2.5rem);
}
Try it Yourself »
Definition and Usage
The CSS clamp() function is used to set a
value that will adjust responsively between a minimum value and a maximum value
depending on the size of the viewport.
The clamp() function has three parameters: a
minimum value, a preferred value, and a maximum value. The browser selects the
preferred value if it falls within the specified range; otherwise, it chooses
the minimum or maximum value.
| Version: | CSS Values and Units Module Level 4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| clamp() | 79 | 79 | 75 | 13.1 | 66 |
CSS Syntax
clamp(min,
preferred, max)
| Value | Description |
|---|---|
| min | Optional. Specifies the smallest allowed value |
| preferred | Required. Specifies the preferred value |
| max | Optional. Specifies the largest allowed value |
