为 px 正名

背景文章

• 简言 px

正文

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

• px
• em
• rem

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

px vs rem

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

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

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

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

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

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

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

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

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

px vs em

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

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

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

虽然，这样的场景很少。

结论

• 重要的是理解每种单位的实际含义，在具体场景下能作出正确的判断和选择
• 在大多数场景下
  • px vs rem，我更倾向于使用 px
  • px vs em，仅在组件嵌套且存在内外尺寸依赖关系时使用 em，但这样但场景很少

参考

• https://benfrain.com/just-use-pixels/
• https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/