移动端自适应布局为什么要使用rem+vw

1.可以使用百分比吗？
如果所有元素的大小都设置成html或body大小的一个百分比，理论上的确可以在不同的设备上实现自适应。但是事与愿违，并非所有情况都可以设置百分比，比如浮动元素会脱离文档流，父级元素必须预先确定高度才能设置高度百分比。这些问题当然都有很好的解决方案，但是这些缺陷已经足以让我们在自适应的道路上抛弃它了。

2.rem如何实现自适应
实际的元素 / 设计的元素 == 实际的页面 / 设计的页面
所谓"设计"就是我们写代码期望网页呈现出来的样子，所有元素的大小和位置都和我们预想的一摸一样。通常在电脑端呈现出来的就是和设计的是一样的，但是移动端由于屏幕比电脑端小，呈现出来的样子就会不太一样，错位时有发生，所以才需要适配。
如果上面的等式恒成立，则说明适配成功。实际的元素 == 设计的元素 * （ 实际的页面 / 设计的页面），也就是是说需要知道（ 实际的页面 / 设计的页面）,设为k。试想，如果css中有一个属性能知道这个比例k,那么适配问题就已经完美解决了。可惜，并没有这个属性。但是,幸运的是，rem可以充当我们和这个比例之间的桥梁，rem可以看作一个单位，它可以和根元素的文字大小关联，也就是说把html的font-size设为k，比如设备屏幕尺寸是300px,设计稿宽度是600px,则html的字体大小就是320/640 = 0.5px，没错，这个值一般都很小，但是font-size的值一般在10px以上，虽然html里的font-size肯定会被下面设置的font-size所覆盖，但是处于习惯，还是会将这个k值乘上一个系数，一般是100，上面这个例子的话，html的字体大小就是50px。
这样，我们就找到了页面上不变的东西，就可以以不变应万变。至此，页面上所有元素的大小都可以用rem，或者说比例k来表示。

rem的缺陷
第一，和根元素font-size值强耦合，系统字体放大或缩小时；第二，rem是通过px换算的，难免会出现小数点（虽然乘上一个系数已经削弱了这个问题的影响），部分安卓机很容易出现的样式错乱的问题；第三，html文件头部需插入一段js代码。为什么需要这段代码呢？就是为了计算上面的比例k,为了计算k，就必须知道当前设备的宽高，因此js代码是鼻部可少的。
下面是我在网上找到的一段比较好的代码。

(function(doc, win) {
 var docEl = doc.documentElement,
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function() {
   var clientWidth = docEl.clientWidth;
   if (!clientWidth) return;
   docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
  };
 if (!doc.addEventListener) return;
 win.addEventListener(resizeEvt, recalc, false);
 doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)

也挺长的，看着确实烦人。

4.那么vw可以做什么呢
为了弥补这些缺陷，目前比较主流的自适应方式就是rem+vw布局（至少解决了大部分问题吧…）。
首先，什么是vw呢？
1vw = 可视窗口的宽度的百分之一。
1vh = 可视窗口的宽高度的百分之一。
顺便一提，
vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个。
第一，vmin和vmax配合@media查询使用，就可以解决窗口适配的问题了！
第二，rem的那段js代码不用写了，代码简洁性大大增加。而vw和vh是css3自带的属性，无需添加额外的代码。
5.使用vw+rem实现移动端自适应
前面已经说了用SASS函数，将px转换成rem,然后整个页面就可实现自适应，但是要写一段js代码实现rem的动态变化。现在就不用这么麻烦了，只要用SASS函数将rem的值用vw来表示，vw自己会动态变化。
5.为什么一开始不用vw+rem进行布局
因为vw最大的弱点在于兼容性，毕竟这是css3新加的属性，ios8，Android4.4以上才兼容。但是时过境迁，现在大部分设备都已经兼容了。
6.为什么不单独使用vw
因为因为视口单位有个缺点就是它没有最小或者最大限制，这就达不到我们都时候所希望的一个限制（比如窗口太小了，字都看不清）。所以我们可以在根元素上设置vw和vh，然后在根元素上限制最大最小值，然后配合body设置最大最小宽度。
这个博客对我产生了一点点启发：
https://blog.csdn.net/MaYang_/article/details/100620781