3

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

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

body{
  font-size: 14px;
}


p{
  font-size: 150%;
}

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

li{
  font-size: 150%;
}

li li{
  /* ... */
}
4

4 回答 4

7

CSS3引入rem（根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%），然后将父元素设置为必要的大小。但是，这种 hack 会导致正确遵循级联的新浏览器出现问题。同样，我的建议是使用 rem 来获得灵活性和易于维护以及 px 的后备（对于不受支持的浏览器）。

于 2013-11-05T00:21:41.870 回答
2

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

例如，如果您有：

<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 都会再次导致相对字体大小随着每个嵌套而增大或缩小。

于 2013-11-05T00:10:05.213 回答
0

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

虽然，如果你不想麻烦，你可以依靠 %、em 或 javascript...

于 2013-11-05T00:15:43.523 回答
0

如果您想要绝对控制或需要“像素完美”结果，则使用绝对单位（像素）。另一方面，如果字体大小需要根据屏幕大小进行更改，则通常使用相对单位，例如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/详细解释了绝对和相对字体大小。

于 2018-02-21T07:43:56.240 回答