css - vw 实体中的字体大小 - 可调范围？

Question

所以我开始想知道是否有办法使用 vw 调整字母大小的范围？假设我们会:

<h1>This is our header</h1>

h1{ font-size:2vw; }

在桌面上字体会很大——而在移动屏幕上会很小。那么，如果您仍然需要在媒体查询中重新调整它，那么使用 vw 有什么意义呢？!

例子: http://css-tricks.com/examples/ViewportTypography/

Answer 1

你明白了，以 vw 为单位设置 font size 会使它在小视口(viewport)中非常小且不可读。在电脑屏幕上看起来不错的东西在手机上看起来很糟糕。

但是......为什么不为移动设备使用“字体最小大小”之类的东西呢？

CSS 中没有 font-min-size 这样的属性，但是使用 calc() 可以解决这个问题> 功能。

考虑一下:

font-size:calc(10px + 0.5vw)

您使用混合单位(像素和 vw)的 calc 函数为主体设置默认字体大小。你听说过数学的极限吗？它的工作方式相同。

对于计算机的典型屏幕尺寸 1366 x 768px，font-size 的值为 16.83px。当您将视口(viewport)缩小到移动设备的尺寸时，例如宽度 600px font-size 将是 13px。随着视口(viewport)变小，vw 单位也变小了。设置 calc(10px + 0.5vw) 因此我们将最小字体大小设置为 10px。

对于像 4K 这样的大屏幕，我们避免了文本太小看不清的情况。对于 4K 屏幕，您有一个 font-size 值 29.2px。

---

查看此演示并尝试更改您的视口(viewport)以查看更改。最难的部分是设置最佳比例 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>

---

这个解决方案留下了一个问题:为什么没有被广泛使用？？

我希望有人觉得这个有用或者可以改进我的答案。