移动Web开发基础-利用VW单位适配布局

前言

前面我们分享 移动Web开发基础-rem布局 的时候提到了两个方案。方案的最终目的都是为了形成一个“流单位”。
方案一是通过媒体查询给html设置font-size，密集的断点设置形成“流单位”。
方案二是通过JS脚本根据设备显示屏大小动态计算出根元素字体大小，这个计算结果几乎是连续的“流单位”。

两个方案的对比，我们常用的当然也是建议的方案是第二个。
目前来看，方案二存在一个问题是JS和HTML没有得到解耦，这里有一个视口单位VW天生就是“流单位”。
如果对视口相关知识点不熟悉的话可以阅读 移动Web开发基础-Viewport。

认识视口单位

根据CSS3规范，视口单位主要包括以下4个：

vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个
视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。

兼容性

目前常用的浏览器版本都是兼容该单位的，正说明我们可以开始使用视口单位来实现适配布局了。

使用VW布局页面

（以下都以iPhone 6的尺寸为例）

方案一：
最简单的方案就是所有的布局元素及属性都用VW来做单位，对应关系是：
设计稿 750px——>100vw
那我们书写时计算：(x/750)*100vw
sass:

$vw_base: 750; 
@function vw($px) {
   
    @retur