如果在使用视口单元时更改浏览器缩放比例，是否可以调整文本大小

Question

我选择使用视口单元来使我的Web应用程序具有响应性。

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

我尝试了一种方法，但我不知道是否有更好的方法可以做到这一点。

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

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

这意味着它将在300px屏幕上具有14px的FontSize，在1600px宽度的屏幕上具有26px的字体大小。