clamp function explanation
when using the
clamp function for responsive layouts, i know the format is min size | preferred size | max size, would each size in the format correspond to the different devices? Such as the min size for mobile, the preferred size for tablet, the max size for dekskop? is that how this sort of thing works? I would much appreciate anyone explaining this to me š23 Replies
Not always. Many people basically have a mobile size and desktop size and use the preferred size for between there. However, sometimes people have one for something like tablet to desktop and then a new one for mobile to tablet
Just depends š
ah so if we're using font sizes as an example, the preferred size would just be a sort of medium font size between the min and max values? ahh i see how that would work š
much appreicate your help
Yea no problem! It's a decent way to think about it for sure, it should be a flexible value though as well
š, ah cool cool, is it okay if i ask what you mean by that? in what cases should it be a flexible value etc?
Here's a site that generates them for you š
font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);
Something like thisOh that's awesome, thank you, that'll definitely be useful š, on the other hand would you be able to explain how to come up with the preferred value and what the + Xvw means? I like to learn how these things work š
Yea, it's just a matter of preference! Say we're doing 1rem + 1vw.
If the screen size is 1600px, the font would be 16px (that's 1rem) + 16px (1/100 * 1600), or 32px in total
If the screen size was 500 px, it would be 16px + 5px, or 21px
Basically, the font never be less than 16px
Maybe though, you only want the font to be at least 20px and at most 30px.
So, a clamp of (20px, 1rem + 1vw, and 30px), that would mean any screen size below 400px would have a font size of 20px, anything between 400px and 1400px would be dynamic, and anything above 1400px would be 30px
You could do the math manually or just use a generator š
Ah gotcha I see, so the 1vw is equal to (1/100 * the width of the screen)? And adding the viewport width means that the preferred value can't go below your minimum value?
Ahhh I see now, what you do mean by it would be dynamic?
Yes to the first part, no to the second.
That's why we use clamp, to make sure it doesn't go too small!
Oh yeah that wasn't a good question on my part š
, what do we add the vw for?
If I had a font size of jusf 1vw, we'd have a don't size of 3px on mobile š
To make it change based off font size
Here's a more verbose example as I'm on mobile and can't really explain it
Matthew James Taylor
Responsive Font Size (Optimal Text at Every Breakpoint)
Use these two simple methods to create dynamic font sizes that grow to compliment every screen resolution.
Where do we get 3 from if you don't mind me asking? š
, I'm sorry, I'm just new to this function š
Just most mobile screens are 300px š
Ohhhhh I see I see š
So 1vw of 300px is 3 haha
It's because of the equation, got it now, blanked out for a second there with that one š
Exactly!
š
Thank you, will check this out for sure!
And thank you for all your help explaining this, I really appreciate it š
Haha clamp and fluid font sizes are some of the more advanced topics so they may take a little bit to get. If you need any more help just let me know!
Ah they definitely seem a challenging bunch š
, will do, I appreciate that too!