vw 和 rem 是什么？怎么使用？

简单来说 vw 是视口单位，相当于把视口等分成了100，1vw = 1;

rem是相对单位，设置根元素 html 的 font-size，比如给 html 设置字体大小为100px，1rem = 100px;

相对长度单位，不过em是根据父元素的font-size来进行转变的。

例如，下面代码父元素.parent字体大小为12px，子元素.son的宽高为1rem（即：1em = 12px;）

　　　<div class="parent" style="font-size: 12px;">
        <div class="son" style="width: 1em;height: 1em;"></div>
     </div>

首先你需要知道rem是指页面根元素的字体大小，即html的font-size，默认情况下，html的font-size是16px，相当于1rem = 16px;

但有一种情况需要考虑，即：如果rem被改变时。比如你引入的第三方UI组件或插件中设置了html的font-size:100px;

那么此时的1rem = 100px;会覆盖浏览器默认的1rem = 16px; 如果引入第三方UI组件或插件单位用的px，还需要全部转换成rem

为什么要使用vw+rem？

在不了解vw+rem之前，仿站写移动端写自适应页面常常无从下手。

如果所有元素的大小都设置成html或body大小的一个百分比，理论上的确可以在不同的设备上实现自适应。但是事与愿违，并非所有情况都可以设置百分比，比如浮动元素会脱离文档流，父级元素必须预先确定高度才能设置高度百分比。

百分比布局的缺点：

宽度虽然能随屏幕自适应，但高度固定不变，当设备屏幕越来越大，会有一种被强行拉伸的既视感，用户体验差

媒体查询的缺点：

CSS 代码量增多，体积增大，要为每一个不同分辨率的设备单独写一套样式来自适应。

在这种情况下，rem 的出现无异于黑暗中的一道曙光，不过它也有一个缺点

rem的缺点：

需要引入一段JS代码，这样违背了样式行为分离的思想，而且耦合深，无法解耦

使用 vw，不需要引入 JS 代码就能达到比 rem 更好的效果，并且相对于视口，所以在宽屏上也能很好的显示

vw的缺点：

vw 虽然好用，但却因为相对于视口，所以失去了最大宽度/高度的限制，可能在宽屏上看到完美，竖屏上就不忍直视了。这时需要你额外为元素添加最大宽度/高度来限制

说了这么多缺点，依靠单独一种方法不行，可以结合起来使用：vw + rem。

简单介绍

1、我们以 iPhone6为基准，屏幕宽度为375px，然后换算成 vw

375 / 100 = 3.75;

注：vw 是视口单位，被均分成了100，1vw = 1，所以根据上面计算，1vw = 3.75px

2、一般使用 rem 会给 html 的 font-size 设置大小为 100px，因为方便计算，这里需要把100px 换算为 vw

100 / 3.75 = 26.6666666vw；

注：上面结果能最大限度减少像素偏差，经测试，若值舍五入为27vw或26vw都会有1-2像素的偏差

此时表面上看html的font-size被设置为26.6666666vw，但实际html的font-size为100px，1rem = 100px

元素的值还是用rem，而不是用vw，这么说可能有点绕，运行下面demo在iPhone6下查看就会明白了

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style>
        html {
            font-size: 26.6666666vw;
        }
        div {
            margin: 0.2rem auto;
            width: 3rem;
            height: 0.3rem;
            line-height: 0.3rem;
            color: #fff;
            font-size: 0.16rem;
            text-align: center;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div>我是第一</div>
    <div>我是第二</div>
    <div>我是第三</div>
</body>
</html>

输出结果：

我是第一

我上第二

我是第三

注：上面div的 font-size 我用的 rem，没用px，主要想让demo效果更明显。

单理解移动端布局方案vw+rem

为什么要使用vw+rem？

简单介绍