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

Question

因此，我开始怀疑是否有办法调整范围的字母大小使用大众？让我们说我们会：

<h1>This is our header</h1>

​

h1{ font-size:2vw; }

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

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

Answer 1

您的观点是，将font size设置为vw单元会使其在小型视图中变得非常小且不可读。在电脑屏幕上好看的东西在手机上看起来很糟糕。

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

在CSS中没有像这样的属性，但是使用calc()函数可以解决这个问题。

考虑到这一点：

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

您可以使用calc函数和混合单元-像素和vw为主体设置默认字体大小。你听说过数学极限吗？它也是这样工作的。

对于计算机1366x768px的典型屏幕大小，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>

​

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

我希望有人发现这是有用的，或者改进我的答案。