背景文章
正文
为了便于讨论，这里我们先暂时将 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，但这样但场景很少
网友评论