1

基本上,我问的问题与此处提出的问题相同,但没有得到明确而直接的答案。所以。为什么不对字体大小/行高使用百分比?

据我目前所知:

  1. 它根据其父级调整字体大小。如果没有明确设置,将向上搜索参考,直到它最终到达html标签。
  2. 如果父 div 的字体大小设置为百分比,则其子段落也必须考虑到这一点(乘以该值)。

解决方法:

  • 所以我的解决方案是只为像h1and这样的内容标签设置百分比字体大小p,同时在没有它们的情况下保持div标签干净。在这种情况下,如果我控制htmlon resize 的基本字体大小,我将控制所有字体。
  • 益处:

  • 这和em浏览器兼容性之间的区别(我不确定这个,但我猜百分比应该比ems 更好)。
  • 所以我的问题是:

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

    3 回答 3

    0

    考虑到移动设备时,一般最佳实践是使用 ems。它们往往更适合移动设备,您可以通过谷歌搜索几篇文章以找到相关参考。

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

    希望这可以帮助。

    于 2013-06-12T02:45:25.600 回答
    0

    使用百分比来调整字体大小非常好。但是,我认为它们没有在网络上广泛实施的原因是因为它们从未被设计用于印刷用途,如 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 */
    

    我希望这有帮助。本质上,当您只需为根元素指定百分比时,实际上并不需要在任何地方使用百分比。

    于 2013-06-12T10:44:51.947 回答
    0

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

    这个想法 - 你为排版设置了一个全局模块化比例,在移动尺寸上,并在正文上应用 100% 的字体大小。这包括您的标题的 ems(或 rems),但不包括您的段落 (p)。不要管你的 p,因为它们会从身体继承它们的大小。

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

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

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

    另外,如果您因为客户说它们太大而需要修改字体大小,只需减少正文的字体大小%并收工。

    要设置模块化比例排版,请使用像Grid Lover这样的工具作为起点。这很棒。

    为了更好地了解这个概念,Trent Walton 不久前发表了一篇不错的文章

    于 2013-12-09T17:19:13.133 回答