Question

我已经在Sketch上对我的网站进行了视觉布局，并注意到元素之间的每个像素或者单词的大小。但是当我开始使用单位的CSS布局元素时，我感到很困惑。

我知道设置html {font-size: 62.5%;}以制作1em = 10px;而不是使用px进行布局是一种更好的策略。但是，当我在使用em时尝试制作布局时，我遇到了很多次偏移。

以下问题是，当我们使用 rem 时，为什么我们使用 em ？什么时候适合使用 rem ？（不关心浏览器支持问题）

P.S。：我已经知道了这两者之间的区别。

Answer 1

em和rem在渲染font-size方面有所不同。检查CSS Ruler以便更好地理解。

如果要在不同元素之间/之间使用不同的字体相对大小，则应使用

em。

rem除了html之外没有任何其他父母。

＆＃13;

html {
  font-size: 10px;
}
.font-sizing {
  font-size: 12px;
}
.em {
  font-size: 3em;
}
.rem {
  font-size: 3rem;
}

＆＃13;

<div class="font-sizing">
  <span class="em">I am relative to parent element. So I have font-size of 12x3 = 36px.</span>
  <br>
  <span class="rem">I am relative to root element. So I have font-size of 10x3 = 30px.</span>
</div>

＆＃13;

Answer 2

em相对于父rem相对于根(html)标记。

rem是一个更稳定和可预测的选择。

在制作布局时使用em或rem

2 个答案: