Css 相对于正文的字体大小？

是否有任何方法可以使字体大小与正文字体大小设置相对应

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

body{
  font-size: 14px;
}


p{
  font-size: 150%;
}

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

li{
  font-size: 150%;
}

li li{
  /* ... */
}

---

使用相对值时，如

字体大小：150%这是相对于父元素的。你不能改变这一点

例如，如果您有：

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

结果是p1的字体大小为20磅，p2为40磅，p3为8磅，依此类推

您可以通过覆盖所有内容的字体大小，然后仅对相关元素（例如：

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

但是，任何元素的嵌套，如上例中的
s，都会再次导致相对字体大小随着每次嵌套而增大或减小。
对于您的情况，最好的解决方案是切换到使用变量，并在或中编译css

尽管如此，如果您不想重蹈覆辙，您可以依赖于、%em或javascript…
CSS3引入的
rem
（root em），即html。与em（相对于父字体大小设置单位）不同，
rem
将相对于根设置单位。这是一篇关于rem的好文章：>>>单击此处如果您想要绝对控制或需要“像素完美”的结果，可以使用绝对单位。另一方面，如果字体大小需要根据屏幕大小进行更改，则通常使用相对单位，如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
}

这里有一篇很棒的文章详细解释了绝对和相对字体大小
 
rem
单位与根元素字体大小相关，而不是与
主体
元素相关。使用
px
是一种错误的回退方法——如果可以，为什么首先要使用相对单位？要实现真正的兼容性，请使用
em
或
%
，并进行适当的计算。body元素是一个拼写错误，应该是html，因此感谢您认识到这个错误。至于你对回退的回应，我完全不同意你的观点，请阅读我编辑的原始帖子。@Alex-rem基于根[html]值。当省略html大小时，rem将采用默认值16px。在您的示例中，您对#1 li元素使用了1.5的rem，对#2 li元素使用了150%的百分比，这是从18px的主体字体大小中获取其基本值。并输入复利问题。您的#two li字体大小的解释方式是，id为2的所有li元素的字体大小都将为（其父元素的）150%。@Alex-现在通过示例，两个li的值将为27px（body 18px 150%=27px）。#两个li的值为40.5px（两个li 27px X 150%=40.5px）和#两个li的值为60.75px（两个li 40.5px X 150%=60.75px）。em/%用法的合成有一些变通方法，例如将所有子元素设置为100%或1em。@Alex-要使rem达到目的，请将HTML值设置为18px，然后在文档的其余部分使用rem。同样，我建议对不支持rem的浏览器使用基于px的回退。只是重新说明这个问题并不是一个答案
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;
}

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
}