大众实体中的字体大小 - 可调范围？答案

【问题标题】：font-size in vw entity - adjustable scope?大众实体中的字体大小 - 可调范围？
【发布时间】：2014-05-06 10:20:01
【问题描述】：

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

<h1>This is our header</h1>

h1{ font-size:2vw; }

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

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

【问题讨论】：

此时您最好使用常用单位如 pt,px,em 来设置您的字体大小并通过媒体查询设置最大最小或最合适的字体大小。 vw 和 vh 单位很有趣：这里是你谈论的一个例子:) codepen.io/gc-nomade/full/qunsm
对不起，这没有意义.. 将 vw 与 px 混合？为什么不是 em，rem？：P
vw 与 1000 像素的像素 1vw 一致，为 10px，em 将是您浏览器的默认设置。只需调整您的媒体查询以匹配宽度和 vw/px 比率:)
1vw 是屏幕宽度的 1%，1 vh 是屏幕高度的 1%，字体大小取自浏览器中设置的默认字体大小的 %，px 留给 vw 前面使用和 vh 如果你想在某些时候匹配。顺便说一句，示例不是解决方案，但显示了您在玩 vw font-size 时遇到的问题:)

标签： css font-size viewport-units

【解决方案1】：

您明白了，将font size 设置为vw 单位会使它在小视口中非常小且不可读。在电脑屏幕上看起来不错的东西在移动设备上看起来很糟糕。

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

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

考虑一下：

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

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

对于 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>

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

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

【讨论】：