em-calc 和 rem-calc 的区别

Posted 2023-03-06

技术标签:

【中文标题】em-calc 和 rem-calc 的区别【英文标题】：the difference between em-calc and rem-calc 【发布时间】：2015-06-24 08:52:54 【问题描述】：

到目前为止，我一直在 Zurb Foundation 项目中使用 em-calc 来定义 CSS 大小。但是，最近我注意到开发人员越来越多地使用rem-calc。

我知道每个函数的作用，但我不太明白什么时候应该使用em-calc 或rem-calc。

这两个函数有什么区别？

【问题讨论】：

看起来他们基本上是在尝试做与em 单位相同的事情，但现在改为使用rem。看看为什么你可能想要使用REM 而不是EM，也许这将有助于澄清事情。 j.eremy.net/confused-about-rem-and-em 【参考方案1】：

其实你的问题是How does rem differ from em in CSS?（和Practical difference between rem and em units）的某种重复等等

em-calc() 返回输入的 em 值（以像素为单位），同时 rem-calc() 返回 rem 单位。实际上，这意味着当您使用rem-calc() 设置选择器的字体大小时，字体大小是相对于html 属性的字体大小而不是其直接父属性的。

您可以在以下示例中看到差异：

html

<body>
<section> section text
    <small>small text</small>
</section>   

<section class="rem"> section .rem text
    <small>small text</small>
</section>
</body>

sccs

section 
font-size: em-calc(24);
small  font-size: em-calc(12); 


section.rem 
font-size: rem-calc(24);
small  font-size: rem-calc(12);

上面的结果将如下图所示：

现在更改section 标签的字体大小：

section 
font-size: em-calc(48);
small  font-size: em-calc(12); 


section.rem 
font-size: rem-calc(48);
small  font-size: rem-calc(12);

请注意，由于section 两个标签都是body 的直接父代，使用rem-calc(48) 或rem-calc(48) 作为上面section 的字体大小不会对本示例产生任何影响。

现在结果如下所示：

如您所见，small 的字体大小不随其父级缩放。

我个人认为您应该将rem-calc() 用于页面的主要结构元素（页眉、页脚、内容、导航等），将em-calc() 用于嵌套在前面的主要元素中的元素。

所以这里的例子使用：

section 
font-size: rem-calc(20);
small  font-size: em-calc(10);

【讨论】：

以上是关于em-calc 和 rem-calc 的区别的主要内容，如果未能解决你的问题，请参考以下文章