Modern Responsive Design Features

The CSS math functions min(), max(), and clamp() became stable in April 2020. These functions accept multiple values, which makes them excellent companions for dynamically changing numeric values wherever numbers are accepted. This includes dimension properties as well as gradients, background-size, box-shadow, font-size, and more.

Here’s what they do:

• min(): This asks the browser to use the smaller computed size.

• max(): This asks the browser to use the larger computed size.

• clamp(): This accepts three values in order: a minimum, an ideal, and a maximum size—where the ideal value should include a dynamic measure such as a viewport unit or a percentage.

How do these relate to responsive design? We can use them to request that the browser move smoothly between acceptable values as the context changes instead of creating multiple media queries to handle adjustments.

Here are three quick use cases: