css - 大众单位中定义的字体大小在桌面上显得太大

Question

我最初以像素为单位定义了所有字体大小然后我到处都读到有关响应式字体大小的信息，并且我倾向于使用 VW 单位来表示字体大小

所以我只是使用转换器将所有 px 值转换为 vw，并将我的 CSS 中的每个 px 字体值更改为 vw 单位(vw 的值范围从 3,4 到 6,7)

我在这样做时使用手机，新的 VW 字体单位在我的设备上看起来和 px 单位一样好(到这里都很好)

今天我在 dekstop 上试用了我的网站，它看起来很糟糕，字体太大以至于整个屏幕只充满了 3 行文本 ;-;

现在我知道了，我可以使用媒体查询为 dekstop(大宽度)定义一个较低的 VW 单位值

但是后来我不明白使用大肆宣传的 vw 单位作为字体大小的意义/好处是什么，我也可以使用媒体查询来获取 px 字体大小并将其称为响应式

如果有人对我报告的问题有更好的方法，请提出一些建议

Answer 1

CSS vw 是窗口宽度的 1%。 CSS units reference

因此，如果您在宽度为 300px 的移动设备上将某些内容设置为 10vw，它将是 30px。 (300 像素/10 = 30 像素)。然而，在桌面上说 1000px 宽 10vw 将是 100px。你明白为什么它会发生巨大变化。

基本上，您可能不应该使用 vh/vw 作为字体大小。您应该使用其他基于百分比的单位，例如 em、rem 或 %。保留 viewport-width 和 viewport-height 以满足列大小或页脚等大规模布局需求。