对于页面适配，你应该用px还是rem

css中的单位很多，%、px、em、rem，以及比较新的vw、vh等。每个单位都有特定的使用途，比方当需要设置一个矩形的宽高比为16:9，并且随屏幕宽度自适应时，除了使用%，其余单位是很难做到的。所以不存在说某个单位是错误的，某个单位是最好的这种说法。

那本文说的页面适配，指的是同样的布局，在不同大小的屏幕上怎样进行缩放、控制间距、宽高、字号等大小。

页面适配的方式有很多：

• 用px，结合Media Query进行阶梯式的适配；
• 用%，按百分比自适应布局；
• 用rem，结合html元素的font-size来根据屏幕宽度适配；
• 用vw、vh，直接根据视口宽高适配。

在这些大前提下，还需针对少量小的细节做微调。比方用px的时候，可能在小屏幕中，要对某个容器进行transform: scale(.8)，适当缩小解决。用rem的时候，需要固定页面的左右间距为10px等。

所以对我来说，虽然网上曾对px、rem和em等单位的优缺点争论过很多，但我的观点可能是，具体情况具体分析。有同学可能要炸了，你这跟没说有啥区别？

对，我的意思跟开篇一样，单论某个单位的好坏是没意义的。我们最关注的是：什么场景中，用什么单位最合适。

也不卖关子了，我就直接列少量自己觉得比较好的实践方式，这些都是根据自己多年的开发经验和大量的调研得到的结论：

1. 在视觉稿要求固定尺寸的元素上用px。比方1px线，4px的圆角边框。
2. 在字号、（大多数）间距上用rem。
3. 慎使用em。

为什么我标题没提到%、vw、vh这几个呢？这几个都是按比例适配，只不过参考对象不一样。

%是参考父容器，vw和vh是参考视口。他们的用场景是非常固定的，比方上文提到的16:9的容器，除了使用%，还有更合适的方式吗？另外，1vw = 1%的视口宽度。所以就真正需要按视口大小适配的时候再使用这个单位吧，用场景相对固定。

接下来我会详细详情一下这3个结论的由来。

为什么慎使用em？

em会叠加计算。在这个机制下太容易犯错了，由于你不知道这段css指定的字号具体是多少。

1. // HTML
3. abc
4. def
5. abc
7. // CSS
8. span {font-size: 1.5em;}

实际的效果是这样的：