为什么不使用百分比字体大小？

Question

基本上我提出的问题与here提出的问题相同，但它没有得到明确而直接的回答。所以。 为什么不使用百分比作为字体大小 / line-height？

据我所知，目前：

1. 根据其父级调整字体大小。如果未明确设置，将搜索引用，直到它最终到达html标记。
2. 如果父div的字体大小设置为百分比，则其子段落也必须考虑到这一点（次数）。

解决方法：

3. 因此，我的解决方案是仅为h1和p等内容标记设置百分比字体大小，同时保持div标记清晰。在这种情况下，如果我在调整大小时控制html的基本字体大小，我将控制所有字体。

好处：

4. 这与em之间的区别在于浏览器兼容性（我不确定这个，但我猜百分比应该比em更好或多个）。

所以我的问题是：

1. 如果有人之前曾尝试过并放弃了它的兼容性如何？
2. 为什么这不是常见做法，我没有考虑到什么？

Answer 1

在考虑移动设备时，一般最佳做法是使用ems。它们往往更适合移动设备，有几篇文章可以谷歌找到这方面的参考。

我最近才从px切换到ems，现在我的计划是切换到我的字体大小的rem。 Rem将根据html根字体大小计算，而ems在嵌套时可能会很棘手，因为它们是从父节点计算的。

希望这有帮助。

Answer 2

使用百分比进行字体大小调整非常好。但是，我认为它们没有在网络上广泛实施的原因是因为它们从未被设计用于印刷用途，如EM，PX，PT和最近的REM单元。

兼容性实际上取决于您的项目要求。我认为最好的解决方法是设置html根或body元素的百分比，如下所示：

html {
font-size: 62.5%; /* Sets up the Base 10 stuff */
}

只要使用百分比值设置基本元素，就可以使用您喜欢的任何单位进行字体大小调整，并且您仍然可以保留相关字体大小的优点，从我所理解的是您所追求的内容。

我个人的建议是改用REM。它们类似于EM，但不是级联，而是始终与根元素相关。如果以相对单位（百分比）设置，它将始终引用该值。浏览器支持是不错的（IE9不支持），但您可以随时为旧版浏览器提供基于PX的解决方案，这使得该技术如此高效。要设置它，它看起来像这样：

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

我希望这会有所帮助。从本质上讲，当您只需指定根元素的百分比时，就不需要在任何地方使用百分比。

Answer 3

实际上，我认为响应式设计的未来在于这种在身体标签上应用基于百分比的字体大小的技术，因为它与真正的比例网格系统和模块化比例排版有关。

这个想法 - 你在移动尺寸上为印刷术设置了一个全局模块化尺度，并在身体上应用了100％的字体大小。这包括标题的ems（或rems），但不包括段落（p）。保持你的p，因为他们将从身体继承他们的大小。

此外，您的网格系统和媒体查询（以及所有其他边距和填充）也应该完全是ems / rems，具有基于百分比的容器宽度。

然后，当您在断点处向上移动时，使用媒体查询来定位并增加正文的字体大小百分比，同时调整容器的百分比宽度。

使用这种方法，您只需设置一次字体大小，而不是在每次休息时调整所有标题和p。

另外，如果您需要修改字体大小，因为客户端说它们太大了，只需减少主体的字体大小％并将其称为一天。

要设置模块化比例排版，请使用Grid Lover之类的工具作为跳转。太棒了。

为了更好地洞察这个概念，特伦特沃尔顿did a nice post a while back。