DEV Community

Write Fewer Media Queries With the Clamp() CSS Function

Vitor Paladini on September 07, 2020

Here's a neat little trick: You can use the clamp() CSS function to make font-size responsive and fluid! It works by "clamping", or restricting...

Read full post

Darshak Parikh • Sep 11 '20

For older browsers, we could do something like:

h1 {
  font-size: 16px;
}

@supports (font-size: clamp(16px, 5vw, 34px)) {
  h1 {
    font-size: clamp(16px, 5vw, 34px);
  }
}

This should at least work on older Safari. As for IE, well, it doesn't support @supports. :|

Vitor Paladini • Sep 11 '20

Great suggestion, Darshak! I wish I could pin comments

Erick Eduardo Petrucelli • Sep 11 '20

Hey Vitor, you could edit the post adding this suggestion. Makes sense to increase support with little effort.

Vitor Paladini • Sep 11 '20

Well, it's more a matter of graceful degradation than support increase but your idea is great, I'll do it right now!

Jeremy Smith • Sep 10 '20

Awesome! Thank you for the article and the examples. Much appreciated!

Reading this reminded me of a Github project I saw a couple months ago that allows you to clamp "a line" of text so that the same number of words stay on it regardless of font size.

github.com/tvanc/lineclamp

Clifton Long Jr. • Sep 8 '20

Dang, that's awesome.

It's wild seeing how CSS is evolving.

Vitor Paladini • Sep 8 '20

Yeah! My first experiences with CSS were full of floats and clearfixes so I'm glad to have modern tools like CSS functions, custom properties and Flexbox now 🙂

Mihail Malo • Oct 14 '20 • Edited

Where it really shines is if you do something like

* {
  font-size: clamp(1rem, calc(5vw+0.8rem), 4rem)
}

so that you can modify the speed, and domain, of the responsive scaling.

GlyphCat • Sep 10 '20

Damn, this is going to forever change the way I style my content.

The_Keizzmann😁🎹🎹💻 • Sep 9 '20

Thank you so much for sharing this

This will really improve my responsive designing skills

Ramon Snellink • Sep 7 '20

Woo, that's cool! Surely going to try this on my next project.

Michał Murawski • Sep 8 '20

Damn! Some time ago I needed to implement this kind of thing. I only found JS libraries that did not meet my expectations. I wonder how would it have been with this feature :)

Vitor Paladini • Sep 8 '20

I believe you're talking about fittextjs.com, right? I also had to do something similar in the past and got super bummed out with the fact that I had to use JS for such a small thing

Chris Bongers • Sep 8 '20

Nice article Vitor!
Must really start using this!

Vitor Paladini • Sep 8 '20

Thanks, Chris. You should, yeah! It is so simple and works so well that makes you wonder why we didn't have it before, haha

Eugene Vedensky • Sep 8 '20

It's crazy how powerful these functions get when you mix them in with modern modules, too, like grid.

👨🏾‍💻 Kam Banwait • Sep 10 '20 • Edited

Hmmm, can this be pollyfilled in anyway?

EDIT: found a good solution to use it in older browsers via sass bronco.co.uk/our-ideas/creating-a-...

Vitor Paladini • Sep 10 '20

The tricky part is that the browser also needs to support the vw. Which our old friend IE also doesn't and never will. :(

I believe the only way to polyfill it would be by using something with JS, like fittextjs.com/

Peter Witham • Sep 11 '20

This is genius, never heard of clamp before now.
Thanks!

Muhammad Uzair • Sep 13 '20 • Edited

Amazing, few days ago i wrote a web page using css and html, had to add more then 6 media queries because the button and h1 positioned absolute to background pic were going down on smaller viewports 👐

Le J • Sep 7 '20

Thank you !!!! <3

Vitor Paladini • Sep 7 '20

Happy to help! 😄

mihai • Sep 9 '20

looks nice, but i won't use if because of the low support. Maybe in a few years