移动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) {    @return ($px / 750) * 100vw;}

方案二：
沿用rem布局方案，所有的布局元素及属性都用rem做单位，用vw单位给html设置font-size形成“流单位”，这样就不再需要JS来动态计算根元素字体大小。

如果以前你习惯了约定750px设计稿的根元素字体大小为100px的话，你可以直接设置：

html{    font-size: 13.3333vw;}

如果用过flexible适配方案的话，可能会更接受通过sass来计算，而且可以通过计算给body设置最大宽度和最小宽度，带来更好的体验。

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-1080px，如此类推$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值@function rem($px) {     @return ($px / $vw_fontsize ) * 1rem;}// 根元素大小使用 vw 单位$vw_design: 750;html {    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; //就是相当于20vw    // 同时，通过Media Queries 限制根元素最大最小值    @media screen and (max-width: 320px) {        font-size: 64px;    }    @media screen and (min-width: 540px) {        font-size: 108px;    }}// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小body {    max-width: 540px;    min-width: 320px;}

总结

根据以上分析，我们推荐方案二，这样也就不存在rem布局的相关问题了。用sass方便快捷的开始vw适配布局吧。

---

参考来源：
1.利用视口单位实现适配布局
2.再聊移动端页面的适配