相对于身体的字体大小？

Question

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

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

body{
  font-size: 14px;
}


p{
  font-size: 150%;
}

但是这会在嵌套元素上产生不必要的结果,其中font-size相对于父元素:

li{
  font-size: 150%;
}

li li{
  /* ... */
}

Answer 1

引入了CSS3 rem(root em),这是html.与设置相对于父字体大小的单位的em不同,rem将相对于根设置单位.这是关于rem的一篇很棒的文章:>>>点击这里<<<

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%)然后将父元素设置为必要的大小.但是,这种黑客行为会导致较新的浏览器出现问题,这些浏览器会正确地遵循级联.同样,我的建议是使用rem来实现灵活性和易维护性以及px的后备(对于不支持的浏览器).