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);
}

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

Live demo:

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

References:

https://stackoverflow.com/a/32805276

Comments

[Benjamin Delespierre]

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