为 px 正名

2019-03-24 本文已影响0人耀得嘛

背景文章

为了便于讨论，这里我们先暂时将 css 中的距离单位按是否与空间相关分为两类。空间相关的单位如 %, vw, vh。而今天主要要讨论的，是空间无关的三大单位：

（提示：非科普贴，请确定自己已经理解上述单位的定义后再继续阅读）

近几年，前端便设计界流行起推崇用 rem 来指定字体大小等样式。大概都有这样一些理由：

用户可以通过设置浏览器的 HTML 字体大小来控制整站的字体大小

道理是对的，但实际上现在几乎没有人这样做。不争辩。

开发者可以通过设置 HTML 的 font-size 直接改变整站的字体大小

这叫什么？这叫变量，这特么还是个全局变量。

全局变量有什么危害还需要再补充一下么？如果你引入了两个组件库，他们都是按照 rem 来设计的，并且预设的 html.font-size 不同，你要怎么搞？

现代 web 开发中，如果你真的需要这样一个变量，完全可以在 js 中定义，在使用之处进行引用，这要安全得多。

使用 rem 增加了抽象层次，增加了理解（换算）成本，如果没有什么获益，那为什么还要继续使用它呢？

当然，如果你有正当的理由，权衡后认为利大于弊，自然另当别论。

px 对 em 对替代性并没有那么强，因为 em 的运算模型和 px 差别比较大。

px 是一个绝对单位，而 em 是一个相对单位。

当你的组件存在嵌套关系，外部尺寸可变，且内部尺寸与外部尺寸成比例时，使用 em 就变得非常直观了。

虽然，这样的场景很少。