css - 相对于正文的字体大小？

Question

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

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

body{
  font-size: 14px;
}


p{
  font-size: 150%;
}

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

li{
  font-size: 150%;
}

li li{
  /* ... */
}

Answer 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 所没有的 flex 。 em/% 需要大量维护，并且随着互联网环境的不断发展，这意味着大量的时间。此外，早期的 IE 仍然需要 hack 来设置基本百分比(最常见的是根 [HTML] 为 100%)，然后将父元素设置为必要的大小。但是，这种 hack 会导致正确遵循级联的新浏览器出现问题。同样，我的建议是使用 rem 来获得灵 active 和易于维护以及 px 的后备(对于不受支持的浏览器)。