css相对单位 rem 和 em 的最佳实践

css相对单位 rem 和 em 的最佳实践

rem 相对于根元素进行计算，若根元素的 font-size为16px，则其他元素的2rem的大小为 2*16 = 32px 。（根元素是指没有父节点的 dom 节点，在html中是html标签）em相对于最近的父元素进行计算，若父元素的 font-size为16px，则子元素2em的大小为 2*16 = 32px

演示范例如下：

直观效果为：rem 只和根元素有关，不会因嵌套而层层放大。而 em 因和父元素有关，嵌套越深，放大倍数越多。

最佳实践

若某些模块，如范例中的 box3 需要单独设置与根元素不同的字体大小，则在box3内部的子元素需随 box3 字体大小变化的内容，不能使用 rem 为单位，而应使用 em。

em 维护的是某模块内嵌套元素固定的比例关系

其他情况，都推荐使用 rem ，以便通过根元素字体大小的适配，就能实现整个网页的自适应。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。