1.開始

在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

2.代碼

var gulp = require('gulp'); var jshint = require('gulp-jshint'); // 引入檢測js文件模塊 var uglify = require('gulp-uglify'); // 引入js壓縮模塊 var concat = require('gulp-concat'); // 引入合并文件模塊 var minhtml = require('gulp-minify-html'); // 引入html壓縮模塊 var minify = require('gulp-minify-css'); // 引入壓縮css的模塊 var imagemin = require('gulp-imagemin'); // 引入壓縮圖片插件 var postcss = require('gulp-postcss'); //JavaScript 代碼來轉換CSS 中的樣式 var autoprefixer = require('autoprefixer'); //自動加上瀏覽器前綴 var postcsswritesvg = require('postcss-write-svg') // 解決1px方案// UI設計稿750px寬，那么100vw = 750px，即1vw = 7.5px var pxtoviewport = require('postcss-px-to-viewport'); // 代碼中寫px編譯后轉化成vmvar browserSync = require('browser-sync') var opn = require('opn') //靜態服務器// 1.處理js文件 gulp.task('js', function () {return gulp.src('js/*.js').pipe(jshint()) //檢測js.pipe(uglify()) //壓縮js.pipe(concat('index.js')) //合并js文件并命名為'index.js'.pipe(gulp.dest('build/js')); //將合并后的js文件輸出到build文件夾下 });// 2.處理css gulp.task('css', function () {var processors = [pxtoviewport({viewportWidth: 750,viewportHeight: 1334,unitPrecision: 5,viewportUnit: 'vw',selectorBlackList: [],minPixelValue: 1,mediaQuery: false})];return gulp.src('css/*.css') // 指定css文件夾下的所有后綴為.css的文件.pipe(postcss([ autoprefixer() ])) //自動加上瀏覽器前綴.pipe(postcss(processors))//.pipe(minify()) //使用minify模塊進行css 壓縮.pipe(gulp.dest('build/css')) // 最終將壓縮的文件輸出到minicss文件下 })// 3.壓縮img gulp.task('img', function () {gulp.src('images/*.{png,jpg,gif,ico}').pipe(imagemin({progressive: true, //Boolean類型 默認:false 無損壓縮圖片optimizationLevel: 5, //number類型 默認:3 取值范圍:0-7(優化等級)interlced: true, //Boolean類型 默認false 隔行掃描gif進行渲染multipass: true //Boolean類型 默認false 多次優化svg直到完全優化})).pipe(gulp.dest('build/images')) //輸入到build文件夾下的images文件夾下 })// 4.壓縮html gulp.task('html', function () {gulp.src('*.html') //指定當前文件夾下的所有html文件.pipe(minhtml()) //進行壓縮.pipe(gulp.dest('build')) //將壓縮后的文件輸出到build文件夾下.pipe(browserSync.stream()); //自動打開瀏覽器})// 定義path var path = {css: './css/*.css',js: './js/*.js',html: './*.html',src: './build' };// 命令行輸入gulp或者 gulp default的時候就會執行 gulp.task('default', function(){//把任務串聯起來gulp.start('js', 'css', 'img', 'html');//打開靜態服務器browserSync.init({server:{baseDir: path.src},port:3000,open:false}, function(){var homepage = 'http://localhost:3000/';opn(homepage);});//監聽文件的變化實時編譯 然后刷新gulp.watch([path.html, path.js, path.css]).on("change", function() {gulp.start('js', 'css', 'img', 'html'); browserSync.reload();}); });

3.效果

4.github項目源代碼

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

附:vm布局及使用的圖片參考自大漠老師的博文: 《再聊移動端頁面的適配》

總結

以上是生活随笔為你收集整理的2018移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动端开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。