em和rem_快速提示：尝试结合EM和REM

em和rem

在2014年澳大利亚CSSConf上， Simurai做了一个非常了不起的演讲，名为“字符串样式化” ，他介绍了许多浏览器内部开发技术。 对我而言真正突出的一个技巧是：用EM填充UI组件，并用REM放置它们之间的空间。 或者，根据经验： EM用于填充，REM用于边距 。

之所以如此有趣，是因为这使我们能够简单地通过更改一些font-size属性来缩放整个站点。

希望您的UI组件更大一些吗？ 撞到你的body { font-size: 13px; } body { font-size: 13px; }最多15px 。 是否想在这些组件之间留出更多空白？ 颠倒html { font-size: 15px; } html { font-size: 15px; }最多17px 。

添加空格

当我向上拨html元素的font-size （并因此全局padding ）时，请注意这些按钮之间的空白会增加。 按钮上的填充保持不变地设置为padding: 1em 3em 。

使组件更大

在此示例中，我在body元素上拨号了font-size 。 如您所见，除元素之间的边距外，其他所有元素均按比例增长。

结论

这是创建灵活布局的一种非常快速但功能强大的方法。 自己玩演示：

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-try-combining-ems-and-rems--cms-23270

em和rem