【前端适配】vw+rem自适应适配方案

先说好处：无需借助js，只用css就可以实现一定屏宽范围内元素大小随屏幕宽度改变平稳变化。

再说用法：

第一步：元素大小单位选用rem。

第二步：根据设计稿的屏幕宽度设置html的font-size大小，且单位用vw。

第三步：通过media query设置html根font-size的最大最小px值。

以上就是把大象关冰箱的三个步...啊呸，是一定范围内适配任意屏幕宽度的三个步骤。

例：假设设计稿是1200px的屏幕，第一二步的效果将是：

1200px宽度的屏幕，html的font-size设为1vw，p标签设为1rem，则为12px实际大小；

1800px宽度的屏幕，html的font-size设为1vw，p标签设为1rem，则为18px实际大小；

但如果屏幕宽度是375px，p标签1rem的话，实际大小就只有3.75px了。虽然谷歌浏览器做了最小字号限制（12px)但我们还是希望能自己控制它的大小。于是就有了第三步：

@media screen and (max-width: 1200px) {
    font-size: 12px;
}

再举个例子，假如设计稿是375的屏幕。我们将html的font-size设为12/3.75 = 3.2vw。

375px的屏幕下，p标签设为1rem，则实际大小为12px。

400的屏幕下p标签设为1rem，则实际大小为12.8px。

So，you see。没有借助js，我们就实现了字体大小平稳变化。

好了，上面把好处和结论都给出来了。下面要说原理了：

NO.1 啥是rem？

也不单说rem定义了，随便一搜就有，看完仿佛过眼云烟，转瞬即忘。还是来个css中各单位的对比吧，一看就明白，还顺便巩固了别的单位概念：

• em: 本身元素的font-size值的相对大小（2em就是2倍本元素font值大小）
• rem:根元素（html）的font-size值的相对大小
• vw：viewport（屏幕）宽度的1%
• vh：viewport（屏幕）高度的1%
• %：相对于父元素的大小
• px：实际像素值

为什么要用rem？

首先，为什么不用px很显然了，设完就是个定死的值，完全无法自适应。其次，为啥不用em？因为随着元素的嵌套，这个相对值将随时改变。使代码结构复杂难懂。Tada！那为什么用rem呢？就是因为1能自适应，是个相对值。2是因为其相对根元素的大小，参照物不变，可以贯穿于代码始终。

NO.2 啥是vw？

上边那个表已经说了：vw：viewport（屏幕）宽度的1%。加粗：屏幕宽度的1%！

这意味着，vw本身就带有自适应属性。所以，如果我们把html的font-size设为1vw，则它的实际像素值是随着屏幕大小改变而改变的。1200px的屏幕，1vw就是12px，375px的屏幕，1vw就是3.75。

vw+rem适配的方法绕过了js，直接使用css完成任意宽度适配，就是靠vw的这个特性。为什么要绕过js呢，因为还是css性能好啊！

我们说到1200px的屏幕，根font-size是1vw，那么当我们设置具体的元素大小时，此时使用根font-size相对大小的rem时，就使得具体的任意元素大小都随着根font-size，也就是1vw而改变了。

比如p标签的字体大小设为1rem，那就是1vw，那就是12px！

如果是1800px的屏幕，p标签字体大小设为1rem，那就是1vw，那就是18px了!

如此，随着屏幕的大小改变，元素大小都随之改变！

NO.3 还是要用媒体查询的！

虽然绕过了js，但还是绕不过媒体查询的，我们看到假如设计稿是1200px，那在一定范围内，字体和屏幕宽度成正比都还合理。但如果屏幕过大或过小。比如375px，此时你字体缩缩成了3.75px，肯定就不是我们所期望的了！

所以在给根字体font-size设为vw单位的同时，我们要控制其上下限。具体控制范围按实际情况而定。

举个例子：设计稿1500px时，最小字体低于12px就对人类不友好了，所以，当屏幕宽度低于1200的时候，就将根html的font-size定格在12px：

@media screen and (max-width: 1200px) {
    font-size: 12px;
}

下限情况同理。

NO.4兼容

vw的兼容可能会差一点。查一下：

From: https://caniuse.com/#search=vw

也还行！

Summary!

样式嘛，能用css解决就不要用js。。。vw+rem实现了原来js才能实现的效果，感觉通体舒畅，开心极了！与君共享！Hooray！