所以我开始想知道是否有办法用vw调整字母大小的范围？ 让我们说我们会：
<h1>This is our header</h1>
h1{ font-size:2vw; }
在桌面上字体会很大 - 而在移动屏幕上则很小。那么如果您仍然需要在媒体查询中重新调整它，那么使用vw有什么意义呢？！
答案 0 :(得分：0)
您明白在font size单位设置vw会使其在小视口中变得非常小且无法读取。在电脑屏幕上看起来不错的东西在手机上看起来很糟糕。
但是......为什么不为移动设备使用“字体最小尺寸”之类的东西？
CSS中有{strong>没有这样的属性font-min-size但是使用calc()函数解决了这个问题的CSS解决方法。
考虑一下：
font-size:calc(10px + 0.5vw)
使用具有混合单位的calc函数（像素和vw）为正文设置默认字体大小。你听说过数学上的限制吗？它的工作方式相同。
对于计算机1366 x 768px的典型屏幕尺寸，font-size的值为16.83px。将视口减小到移动设备的大小时，例如，宽度600px font-size将为13px。随着视口变小，vw单位也变小。设置calc(10px + 0.5vw)因此我们将最小字体大小设置为10px。
对于像4K这样的大屏幕，我们避免了文字太小而无法看到的情况。对于4K屏幕，您有font-size值29.2px。
查看此演示并尝试更改视口以查看更改。最难的部分是设置最佳配给量px和vw，以获得最佳用户体验。
div{margin:10px 0;font-weight:bold}
#A1{font-size:calc(10px + .6vw)}
#A2{font-size:10px}
#A3{font-size:2vw}
#B1{font-size:calc(16px + .6vw)}
#B2{font-size:16px}
#B3{font-size:2vw}
#C1{font-size:calc(18px + .6vw)}
#C2{font-size:18px}
#C3{font-size:2vw}<div id="A1">Lorem Ipsum dolor sit amet</div>
<div id="A2">Lorem Ipsum dolor sit amet</div>
<div id="A3">Lorem Ipsum dolor sit amet</div>
--------------------
<div id="B1">"Sed ut perspiciatis unde omnis</div>
<div id="B2">"Sed ut perspiciatis unde omnis</div>
<div id="B3">"Sed ut perspiciatis unde omnis</div>
--------------------
<div id="C1">eos qui ratione voluptatem</div>
<div id="C2">eos qui ratione voluptatem</div>
<div id="C3">eos qui ratione voluptatem</div>
这个解决方案留下了一个问题：为什么它没有被广泛使用？
我希望有人觉得这很有用，或者可能会改善我的答案。