使用vw进行移动端的适配_如何利用vw+rem进行移动端布局

你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹

简单介绍下rem布局方案

rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。但这种方案有弊端(弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；弊端之二：html文件头部需插入一段js代码 )，本文将介绍一种更优秀纯粹的方案。

vw单位实现弹性布局

我们先来看看这vw vh单位 w3c的官方解释 vw：1% of viewport’s width vh：1% of viewport’s height

viewport即浏览器可视区域大小 我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight 在移动端我们一般都可以认为，100vw就是屏幕宽度。若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可

//以iphone7尺寸@2x 750像素宽的视觉稿为例

@function vw($px) {

@return ($px / 750) * 100vw;

}