可以设置最大字体和最小字体，并在缩放时响应吗？

Question

我有这堂课

.md-subheader-title {
    // 22 pixeles
    font-size: calc(12px + 2vw); 
}

在最大尺寸上它的22像素就可以了，但是在移动版本上它小于14像素，是否有可能使它在最大字体尺寸22像素和最小字体尺寸14像素之间产生反响？

Answer 1

使用媒体查询在小于指定宽度的视口上将字体大小强制为固定大小。

在您的情况下，您希望字体大小不小于14px。当calc（12px + 2vw）小于14px或2vw小于2px时，会发生这种情况；即在小于100像素的屏幕上。
（请注意，这些屏幕非常狭窄。）

.md-subheader-title {
    /* 22 pixeles */
    font-size: calc(12px + 2vw); 
}

@media all and (max-width: 100px) {
  .md-subheader-title {
    font-size: 14px; 
  }
}

<div class="md-subheader-title">
This is a variable font, up to a point.
</div>