Less - responsive scalling of fonts with classes defined - html

Question

I'm looking for a smart way to control fonts sizes depending on browser resolution - as reusable ass possible.
So i have done the following:
<section>
<h1>Contact</h1>
</section>
And in LESS file i've defined:
.h1 {
font-size: 90px;
}
section h1 {
.h1;
}
So, as you see i have .h1 class defined and i can reuse it.
But later i saw that my idea is now working (media queries don't work:)
#media only screen and (max-width: 991px) {
.h1 {
font-size: 20px;
}
}
.h1 class has 90px always and media queries didn't change font size to 20px.
My question: is this possible to tweak to work ?
This way i can have small amount of reusable classes and change their size in just one place instead of many places.
Thanks.
PS: I've benn using REM's for long time but it's not perfect for me.

Answer 1

I use a fluid-typography mixin, as show in this guide. This page links to a codepen showing a less mixin.
Essentially you pass through the font size values you want to scale between and also the screen sizes that the scaling to occur between. Beneath is some code directly from the codepen link:
.fluid-type(#property, #min-vw, #max-vw, #min-size, #max-size) {
#{property}: #min-size;
#media screen and (min-width: #min-vw) {
#{property}: calc( #min-size ~" + " unit(#max-size - #min-size) ~" * ((100vw - " #min-vw ~") /" unit(#max-vw - #min-vw) ~")" );
}
#media screen and (min-width: #max-vw) {
#{property}: #max-size;
}
}
the way I use it:
h1{
.fluid-type(font-size, #mobileSize, #desktopSize, 36px, 72px);
}
credit to Mike