The shortest way to achieve responsive font-size

bawa_geek

Lakh Bawa

Posted on August 28, 2020

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

💖 💪 🙅 🚩
bawa_geek
Lakh Bawa

Posted on August 28, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related