Skip to content

Instantly share code, notes, and snippets.

@una
Last active September 22, 2023 18:11
  • Star 18 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save una/07af675be8bcc58c4a824c602d60e42d to your computer and use it in GitHub Desktop.
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