1

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

<h1>This is our header</h1>


h1{ font-size:2vw; }

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

示例： http ://css-tricks.com/examples/ViewportTypography/

4

1 回答 1

0

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

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

CSS中没有这样的属性，font-min-size但是有一个 CSS 解决方法可以使用calc()函数来解决这个问题。

考虑一下：

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

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

对于计算机 1366 x 768 像素的典型屏幕尺寸，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>

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

我希望有人觉得这很有用，或者可能会改进我的答案。

于 2018-05-30T06:27:28.780 回答