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

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

Answer 3

您的最佳解决方案是切换到使用变量并在SASS或LESS中编译您的CSS。

虽然，如果你不想解决问题，你可以依赖％，em或javascript ......

Answer 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/详细解释了绝对和相对字体大小。

相对于身体的字体大小？

4 个答案: