Html 使用定义的类对字体进行响应性较差的缩放

我正在寻找一种智能方法，根据浏览器分辨率控制字体大小-尽可能多。 因此，我做了以下工作：

<section>
  <h1>Contact</h1>
</section>

所以，正如您所看到的，我已经定义了.h1类，并且可以重用它。 但后来我发现我的想法现在起作用了（媒体查询不起作用：）

}

.h1类始终具有90px，媒体查询未将字体大小更改为20px。 我的问题是：这是否可以调整以起作用？ 这样我就可以拥有少量的可重用类，并在一个地方而不是在多个地方更改它们的大小

谢谢。

---

PS：我已经使用REM的很长时间了，但它对我来说并不完美。

我使用了流畅的字体混合，如图所示。此页面链接到显示较少混合的

基本上，您要传递要在其中进行缩放的字体大小值，以及要在其中进行缩放的屏幕大小。下面是直接来自codepen链接的一些代码：

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

}

我使用它的方式：

h1{
  .fluid-type(font-size, @mobileSize, @desktopSize, 36px, 72px);
}

---

这是因为

.h1

语句不会“重用”文件中

.h1

的所有外观，例如，它不会将介质中定义的

.h1

复制到

部分h1

。简言之，如果您希望媒体块随

.h1

混音器一起提供，则媒体应该是它的一部分（而不是与上面的示例相反）。这似乎有效-谢谢。

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

}

h1{
  .fluid-type(font-size, @mobileSize, @desktopSize, 36px, 72px);
}