关于使用rem和px的注意事项

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等单位的优缺点争论过很多，但我的观点可能是，具体情况具体分析。有同学可能要炸了，你这跟没说有啥区别？

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

也不卖关子了，我就直接列一些自己觉得比