CSS Clamp, Min, and Max

Controlling the styling of webpage elements under different conditions, like screen sizes, is never a walk in the park. While you've got Responsive Web Design using media queries to help you with this, sometimes it's unnecessary to write queries when what you would like to control is minor.

A case in point is where you want to set the font size of a given element based on the viewport and cap it at a certain point. Back in the day, you would have to write a lot of CSS code to achieve that kind of behavior. Then came the CSS media queries that somehow made things easier, allowing you to set specific breakpoints and define the styling under each. But we know what writing media queries for several breakpoints entails; it's not a piece of cake.

Thanks to CSS advancements, it's now way easier to control the styling of webpage elements.

In this chapter, we take you through the three functions, clamp(), min(), and max(), which are known to aid responsive web design.

Let’s have a look at each of these individually.

The CSS Clamp() Function

The CSS clamp() function monitors a certain property value as it changes and then sets some boundaries based on prescribed instructions. For example, you can set the width of a certain element to 80% and restrict the width to not less than 400px and no more than 900px.