em-calc和rem-calc之间的区别
Alj*_*jaz 4 sass css3 zurb-foundation zurb-foundation-5
em-calc到目前为止,我一直在Zurb Foundation项目中使用CSS大小定义.但是,最近我注意到开发人员使用的 rem-calc越来越多.
我知道每个函数的功能,但我真的不明白何时应该使用em-calc或rem-calc.
这两个功能有什么区别？
那么你的问题实际上是什么样的副本如何与CSS中的em有何不同？(以及rem和em单位之间的实际区别)等等
em-calc()以像素为rem-calc()单位返回输入的em值,同时
返回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); }
}
上面的结果将如下图所示:
现在更改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在上面不会让这个例子有什么区别.
现在结果如下:
如您所见,小的字体大小不会与其父级缩放.
我个人认为你应该使用rem-calc()页面的主要结构元素(页眉,页脚,内容,导航等)和em-calc()嵌套在前面主要元素中的元素.
所以在这里使用示例:
section {
font-size: rem-calc(20);
small { font-size: em-calc(10); }
}