前端页面适配

前端页面适配

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

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

页面适配的方式有很多：

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

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

建议：

1. 在视觉稿要求固定尺寸的元素上使用 px 。比如1px线，4px的圆角边框。
2. 在字号、（大多数）间距上使用 rem 。
3. 慎用 em 。
4. %、vw、vh 这几个都是按比例适配，只不过参考对象不一样。 % 是参考父容器， vw 和 vh 是参考视口。他们的使用场景是非常固定的，比如上文提到的16:9的容器，除了用%，还有更合适的方式吗？另外，1vw = 1%的视口宽度。所以就真正需要按视口大小适配的时候再用这个单位吧，使用场景相对固定。

注意：

1. em会叠加计算。在这个机制下太容易犯错了，因为你不知道这段css指定的字号具体是多少。 em的计算原理：它是根据当前元素的字号按比例计算的。
2. px的性质决定了它只能用于固定尺寸。
3. 除了固定尺寸用px，其他大部分情况都可以使用rem。
4. em有个明显的优点，它可以通过少量代码解决大部分