前言
目前的移动端页面适配解决方案中，以前比较主流的是使用淘宝的Flexible，虽然已经比较成熟的方案，但是还存在一些问题，所有又出现了现在比较流行的vw适配方案。了解vw需要了解几个参数：
1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
使用这个方案有一点千万别忘了，记得在<head>加入：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
使用gulp是为了把px单位自动编译成vw
一.安装gulp
- 全局安装 gulp：
$ npm install --global gulp
- 作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp
二.新增gulpfile.js
在项目根目录下创建一个名为 gulpfile.js 的文件：
里面书写以下代码：
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtoviewport = require('postcss-px-to-viewport');
gulp.task('css', function() {
//配置的参数
var processors = [
pxtoviewport({
unitToConvert: 'px',
viewportWidth: 750, //视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 568, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
fontViewportUnit: 'vw',// vmin is more suitable.
selectorBlackList: [],
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false. // 允许在媒体查询中转换`px`
})
];
return gulp.src(['build/*.css']) //原始css路径
.pipe(postcss(processors)) //这是自动编译px为vw单位
.pipe(
postcss([
require('postcss-write-svg')({ /* options */ })//为了编译1px线使用的
])
).pipe(
gulp.dest('css/css') //编译后的路径
);
});
//监听文件变化，自动编译
gulp.task('default', ['css']);
var watcher = gulp.watch('build/*.css', ['default']);
watcher.on('change', function(ev) {
console.log("File:" + ev.path + " was " + ev.type + " ,running tasks...");
});
三.输入
在文件写入css代码
/*vw布局*/
div {
border-radius: 4px;
transition: all 0.8s;
width: 750px;
height: 100px;
border: 10px solid #ddd;
font-size: 15px;
padding-bottom: 5px;
padding-left: 18px;
padding-right: 10px;
}
下面的实现1px方案自己编译出来的还是很粗的线，还请知道的大神指教。
/*1px border-image方案*/
/*
* 解决移动端1px线变粗的方法（postcss-write-svg插件编译svg为base64），
* 使用svg绘制1px对应颜色边框的矩形
*
*/
@svg 1px-border {
width: 4px;
height: 4px;
@rect {
fill: transparent;
width: 100%;
height: 100%;
stroke-width: 25%;
stroke: var(--color, black);
}
}
#real-1px {
margin: 10px;
height: 20px;
}
#real-1px {
border: 1px solid;
border-image: svg(1px-border param(--color red)) 1 stretch;
}
/*1px background-image方案*/
@svg square {
@rect {
fill: var(--color, black);
width: 100%;
height: 100%;
}
}
#example {
background: white svg(square param(--color #000));
}
/*
*目前只测试出使用伪类加transform弄出了真正的1px线
*
*/
.hairlines:after {
content: '';
position: absolute;
left: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
四. 运行 gulp：
$ gulp css
运行gulp就会输出以下代码
五.输出
/*vw布局*/
div {
border-radius: 0.53333vw;
transition: all 0.8s;
width: 100vw;
height: 13.33333vw;
border: 1.33333vw solid #ddd;
font-size: 2vw;
padding-bottom: 0.66667vw;
padding-left: 2.4vw;
padding-right: 1.33333vw;
}
/*1px border-image方案*/
/*
* 解决移动端1px线变粗的方法（postcss-write-svg插件编译svg为base64），
* 使用svg绘制1px对应颜色边框的矩形
*
*/
#real-1px {
margin: 1.33333vw;
height: 2.66667vw;
}
#real-1px {
border: 1px solid;
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.53333vw' height='0.53333vw'%3E%3Crect fill='transparent' width='100%25' height='100%25' stroke-width='25%25' stroke='red'/%3E%3C/svg%3E") 1 stretch;
}
/*1px background-image方案*/
#example {
background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23000' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
六.最重要的降级处理
使用 Viewport Units Buggyfill 插件
在html文件head标签添加引用
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
在Index.html文件body标签后添加以下代码
<script>
// vw兼容性处理viewport-units-buggyfill
window.onload = function () {
window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
}
</script>
七.存在的问题：
使用vw有一些细节之处还是存在一定的缺陷的。比如当容器使用vw单位，margin采用px单位时，很容易造成整体宽度超过100vw，从而影响布局效果。对于这个问题，我们可以将margin换成padding，并且配合box-sizing解决。只不过这不是最佳方案，随着将来浏览器或者应用自身的Webview对calc()函数的支持之后，碰到vw和px混合使用的时候，可以结合calc()使用。
还有px转换成vw单位，多少还会存在一定的像素差，毕竟很多时候无法完全整除。
使用vw可能也在存在无法设置最大最小的问题，目前比较好的办法是采用rem和vw的组合使用可以解决这个问题。
