2018移动端页面适配-自适应最新方案直接写px

开始

在flexible的GitHub上面写着：

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。vw的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。

vm是什么?

vw：是Viewport's width的简写，1vw等于window.innerWidth的1%

UI给的设计稿，一般都是宽为750px的，那么就是：

100vw = 750px | 即1vw = 7.5px

这里写图片描述

代码

var gulp = require('gulp');
// ... (此处省略部分代码以节省空间，完整代码请参考原文)
gulp.task('default', function(){
    // ... (此处省略部分代码以节省空间，完整代码请参考原文)
});

效果

这里写图片描述

这里写图片描述

github项目源代码

https://github.com/zhalice2011/gulp-postcss

附：vm布局及使用的图片参考自大漠老师的博文：《再聊移动端页面的适配》