Skip to content

Instantly share code, notes, and snippets.



Last active Jul 17, 2020
What would you like to do?
min() max() clamp()
.sidebar {
/* Select smaller of the 2 calculated values
Narrower screens: 20vw, Wider screens: 300px */
width: min(20vw, 300px);
.make-the-logo-bigger {
/* Select larger of the 2 calculated values
Basically clamps the font size to 60px or larger (10vw) */
font-size: max(60px, 10vw);
.ok-lets-not-get-crazy {
/* Given a min and max value, select the best
fit based on the middle argument. (<min>, <value>, <max>)
The font size will always be between 1rem and 2rem,
using 10vw until it hits the min or max */
font-size: clamp(1rem, 10vw, 2rem)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment