em-calc和rem-calc之间的区别

到目前为止，我在Zurb基金会项目中一直使用em-calc作为CSS大小定义。不过，最近我注意到开发者越来越多地使用rem-calc。em-calc和rem-calc之间的区别

我知道每个功能是干什么的，但我不明白什么时候应该使用em-calc或rem-calc。

这两个函数有什么区别？

2015-04-17 Aljaz

看起来他们基本上是试图做的，他们用'em'单位也做了同样的事情，但与'rem'，而不是现在。看看为什么你可能想在'EM'上使用'REM'，也许这将有助于澄清事情。 https://j.eremy.net/confused-about-rem-and-em/ –

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

em-calc()返回像素您输入的EM值，而 rem-calc()回报REM单位。在实践中，这意味着当您使用rem-calc()设置选择器的字体大小时，字体大小与html属性的字体大小相关，而不是其直接父级。

你可以看到在下面的例子中diffence：在显示

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); } 
}

上面的结果看起来像图片如下：

enter image description here

现在改变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的字体大小上面的这个例子不会有什么不同。现在

结果就会像下面这样： enter image description here

正如你所看到的，字体大小小不与其父规模。

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

所以对于例如用在这里：

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

来源

2015-05-02 14:08:28

em-calc和rem-calc之间的区别

回答

相关问题