自适应布局 — VW、VH

vh vw 是css一种新的长度单位

vh -- 视口高度被均分为100单位的vh，即 1vh == 1%视口高度。100vh == 视口的高度
vw -- 视口宽度度被均分为100单位的vw，即 1vw == 1%视口宽度。100vw == 视口的宽度
vmin -- 取vw或vh中较小的那一个
vmax -- 取vw或vh中较大的那一个

计算公式

和使用rem单位一样，vh vw也可以通过计算函数使用，这样更加方便。
Sass函数:
以移动端PSD设计稿 宽为750px，高为1250px为例。拿dom在设计稿内的尺寸比例 乘以 100vh/vw ，得到了在当前视口的尺寸占比。

@function vw($px) {
  @return ($px / 750) * 100vw;
}
//有特殊要求也可以高度自适应，一般宽度自适应就可以了
@function vh($px) {
  @return ($px / 1250) * 100vh;
}

使用：
只要输入在设计稿内的尺寸就好，个人认为比rem操作根字体大小实现自适应要好。

div {
    height:vh(250);
    width:vw(350);
}

使用工具 postcss-px-to-viewport

安装 npm install postcss-px-to-viewport --save

在postcss.config.js添加配置:

"postcss-px-to-viewport": {
  viewportWidth: 375,   // 视窗的宽度，对应的是我们设计稿的宽度，Iphone6的一般是375 （xx/375*100vw）
  viewportHeight: 667, // 视窗的高度，Iphone6的一般是667
  unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
  viewportUnit: "vw",   // 指定需要转换成的视窗单位，建议使用vw
  selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
  minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
  mediaQuery: false     // 允许在媒体查询中转换`px`
}

配置完成后可以在项目组直接使用 px 单位，postcss-px-to-viewport 会转换为 vh、vw