4

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

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

这两个功能有什么区别？

4

1 回答 1

8

事实上，你的问题是CSS 中的 rem 与 em 有何不同？（以及rem 和 em 单位之间的实际区别）等等

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标签都是bodyusing的直接父级，rem-calc(48)或者上面rem-calc(48)的 font-sizesection不会对本示例产生任何影响。

现在结果将如下所示： 在此处输入图像描述

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

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

因此，对于此处使用的示例：

section {
font-size: rem-calc(20);
small { font-size: em-calc(10); }
}
于 2015-05-02T14:08:28.103 回答