css - 如果我在使用视口(viewport)单元时更改浏览器缩放比例，有没有办法调整文本大小

Question

我选择使用视口(viewport)单元来使我的 Web 应用程序具有响应能力。

问题是当我在 vw 中设置字体大小时，我得到了我想要的所有屏幕的大小，但是当我更改浏览器缩放时，文本仍然具有相同的大小。

我尝试了一种方法，但我不知道是否有更好的方法。

我的实际解决方案是使用 calc 将像素与 vw 结合起来

text: {
  fontSize: 'calc(10px + 2vw)'
}

Answer 1

来自 https://css-tricks.com/books/volume-i/scale-typography-screen-size/他们有一个我用过的很好的公式

  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

示例:

  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));

这意味着它在 300 像素的屏幕上的字体大小为 14 像素，在宽度为 1600 像素的屏幕上的字体大小为 26 像素。