DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for The shortest way to achieve responsive font-size
Lakh Bawa
Lakh Bawa

Posted on • Updated on

The shortest way to achieve responsive font-size

Hello guys, hope you are doing well,

Today, I learned something that I was trying to achieve unconsciously for almost 2 months.

Coming to the point, here is the shortest path to achieving responsive font-size in CSS, I have tested it and used it, so no a big problem here.

.quickbar {
font-size: calc(0.9rem + 1vmin);
}

Enter fullscreen mode Exit fullscreen mode

I have used rem as font size unit, you can use a pixel or anything you want.

here is the definition of terms used above, in case you are not aware of those.

vmin is the minimum between the viewport's height or width in percentage depending on which is smaller
Enter fullscreen mode Exit fullscreen mode

Live demo:

https://codepen.io/csuwildcat/pen/qOqVNO

References:

https://stackoverflow.com/a/32805276

Top comments (1)

Collapse
 
bdelespierre profile image
Benjamin Delespierre

Good to know. Plus calc has an amazingly good support : caniuse.com/#search=calc

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: