相对于正文的字体大小？答案

【问题标题】：Font-size relative to body?相对于正文的字体大小？
【发布时间】：2018-02-21 15:43:56
【问题描述】：

有什么方法可以让字体大小相对于正文字体大小设置？

我知道我可以使用这样的百分比：

body{
  font-size: 14px;
}


p{
  font-size: 150%;
}

但这会在嵌套元素上产生不需要的结果，其中字体大小变得相对于父元素：

li{
  font-size: 150%;
}

li li{
  /* ... */
}

【问题讨论】：

标签： css font-size

【解决方案1】：

CSS3 引入了rem(root em)，即html。与 em 设置相对于父字体大小的单位不同，rem 将设置相对于根的单位。这是一篇关于 rem 的精彩文章：>>>CLICK HERE<<<

CSS：

html {
    font-size: 14px;
}

p {
    font-size: 21px;   /*cross browser fall-back hack*/
    font-size: 1.5rem; /*same as 150%*/        
}

li {
    font-size: 21px;   /*cross browser fall-back*/
    font-size: 1.5rem;
}
li li {
    font-size:18px;    /*cross browser fall-back*/
    font-size: 1.25rem;
}

对于跨浏览器兼容性问题，您可以通过包含 px 来使用回退以获得所需的结果。

我正在添加对 Jukka K. Korpela 评论的回复，因为我认为它与原始帖子相关。

rem 的功能是试图消除整个文档（尤其是列表）中 em/% 的复合效应，并获得 px 所没有的弹性。 em/% 需要大量维护，并且随着互联网环境的不断发展，这意味着大量的时间。此外，早期的 IE 仍然需要 hack 来设置基本百分比（最常见的是根 [HTML] 为 100%），然后将父元素设置为必要的大小。但是，这种 hack 会导致正确遵循级联的新浏览器出现问题。同样，我的建议是使用 rem 来获得灵活性和易于维护以及 px 的后备（对于不受支持的浏览器）。

【讨论】：

rem 单位是相对于根元素字体大小的，而不是相对于 body 元素的。使用px 是一个错误的回退——如果可以，为什么首先使用相对单位？为了真正的兼容性，请使用em 或%，并进行适当的计算。
body 元素是错字，应该是html，所以感谢您认识到这个错误。至于您对回退的回应，我完全不同意您的观点，请阅读我编辑的原始帖子。
@Alex - rem 基于根 [html] 值。当省略 html 大小时，rem 将采用默认值 16px。在您的示例中，您为 #one li 元素使用了 1.5 的 rem，为 #two li 元素使用了 150% 的百分比，该元素从 18px 的正文字体大小获取其基本值。并进入复合问题。 #two li font-size 的解释方式是所有 li id 为 2 的元素将具有 150% 的 font-size （其父元素）。
@Alex - 现在逐步执行示例，#two li 的值为 27px（主体 18px X 150% = 27px）。 #two li li 的值为 40.5px（two li 27px X 150% = 40.5px），#two li li li 的值为 60.75px（two li li 40.5px X 150% = 60.75px）。有一些混合使用 em/% 的解决方法，例如将所有子元素设置为 100% 或 1em。
@Alex - 要使 rem 达到目标，请将您的 HTML 值设置为 18px，然后在文档的其余部分使用 rem。同样，我建议对不支持 rem 的浏览器使用基于 px 的回退。

【解决方案2】：

当使用相对值时，例如font-size: 150%;，这是相对于父元素的。你无法改变它。

例如，如果您有：

<div>
  <p id=p1>
    <p id=p2>
      <p id=p3>
         ...

使用这个 CSS：

div { font-size: 10pt }
p   { font-size: 200% }

结果是 p1 的字体大小为 20pt，p2 的字体大小为 40pt，p3 的字体大小为 8-pt，以此类推。

您可以通过覆盖所有内容的字体大小来解决此问题，然后仅对相关元素执行相对字体大小，例如：

*    { font-size: 100% }
body { font-size: 10pt }
#p3  { font-size: 150% }
div  { font-size: 120% }

但同样，任何元素的嵌套，例如上面示例中的<div>s，都会再次导致相对字体大小随着每次嵌套而增大或缩小。

【讨论】：

只是重申问题不是答案

【解决方案3】：

在您的情况下，最好的解决方案是切换到使用变量并在SASS 或LESS 中编译您的css。

不过，如果你不想麻烦，你可以依赖 %、em 或 javascript...

【讨论】：

【解决方案4】：

绝对单位，即像素，用于您想要绝对控制或需要“像素完美”结果的情况。另一方面，相对单位，如em或rem，通常用于字体大小需要根据屏幕大小而变化的情况。它提供了更简单的操作并且需要更少的媒体查询使用。

em 单位是相对于父字体大小的，而 rem 单位是相对于根元素的。

以下是 rem 单位的用法示例：

html { font-size: 100% } //usually this is 16px

p, 
div {
  font-size: 1rem; //this will equal to 16px
}


section, 
article  {
  font-size: 1.5rem; //this will equal to 24px
}

这里有一篇很棒的文章https://kolosek.com/css-relative-font-size/，详细解释了绝对和相对字体大小。

【讨论】：