Everything I Learned About min(), max(), clamp() in CSS

Ahmad takes a look into the CSS min(), max(), and clamp() functions. As with all his articles, he also provides some practical use cases and examples.

Regarding the clamping of the font-size of a page, you don’t really need clamp():

Above that clamp() in Safari 13.1 doesn’t seem to like font-size, so it wouldn’t work there anyway.

Everything I Learned About min(), max(), clamp() in CSS →

πŸ’β€β™‚οΈ You might also like this post by Dannie Vinther which covers the same subject: Flexible layouts without media queries

πŸ’‘ Want to know more about CSS Functions? You can read The Complete Guide to CSS Functions on CSS-Tricks.

UPDATE 2020.05.07: An interesting discussion sparked on Twitter regarding the clamping of the font-size.

As Ε ime Vidas noted, using font-size: clamp(16px, 5vw, 50px); has an accessibility issue as it breaks page zoom.

The problem isn’t the clamping itself, but using a β€œpure vw” font size.

To fix page-zoom, add a unit that does respond to page zoom in the mix.

.title {
    font-size: clamp(16px, 5vw + 16px, 50px);
}

This way it will respond to both viewport width change and page zoom.

About the Author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.