1. Start

It says on Flexible’s GitHub

Since viewPort units are compatible with many browsers, lib-flexible is a transition solution that can be abandoned, and there are problems with both current and previous versions. It is recommended that you start using viewPort instead. See “How to Use VW for Mobile Adaptation in Vue Projects” for a VW compatibility solution.

  1. What is VM? —

Vw: short for Viewport’s width. 1vw is equal to 1% of window.innerWidth

  1. UI design draft, generally is 750px wide, so

100 vw = 750 px | 1 vw = 7.5 px

Code 2.

var gulp = require('gulp');
var jshint = require('gulp-jshint'); Var uglify = require('gulp-uglify'); Var concat = require('gulp-concat'); Var minhtml = require('gulp-minify-html'); Var minify = require('gulp-minify-css'); Var imagemin = require('gulp-imagemin'); Var postcss = require('gulp-postcss'); Var autoprefixer = require('autoprefixer'); Var postcsswritesvg = require('postcss-write-svg'Var pxtoviewPort = require(1vw = 7.5px var pxtoviewPort = require('postcss-px-to-viewport'); Var browserSync = require(var browserSync = require('browser-sync')
var opn = require('opn'// static server // 1. Handle js file gulp.task('js'.function () {
    return gulp.src('js/*.js').pipe(jshint()) // Check js.pipe (uglify()) // Compress js.pipe (concat())'index.js') // Merge the js files and name them as'index.js'
        .pipe(gulp.dest('build/js')); }); // 2. Handle 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'Pipe (postcss([autoprefixer()])) // Automatically prefixes browser.pipe(postcss(processors)) //.pipe(minify())) // Use the minify module for CSS compression. Pipe (gulp.dest('build/css') // Finally output the compressed file to minicSS file}) // 3. Compression img gulp. Task ('img'.function () {
    gulp.src('images/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true, //Boolean type default:falseOptimizationLevel: 5, //number Type Default :3 Value range :0-7true, //Boolean type defaultfalseInterlaced scan GIF for rendering multipass:true//Boolean type defaultfalseOptimize SVG several times until it is fully optimized})).pipe(gulp.dest('build/images') // Enter the images folder under build folder}) // 4. Compressed HTML gulp. Task ('html'.function () {
    gulp.src('*.html'Pipe (minhtml()) // zip.pipe(gulp.dest())'build'Pipe (browsersync.stream ()); pipe(browsersync.stream ()); Var path = {CSS:'./css/*.css',
    js: './js/*.js',
    html: './*.html',
    src: './build'}; Gulp. Task (gulp.'default'.functionGulp.start (){// string the tasks together'js'.'css'.'img'.'html'); // Open the static server browsersync.init ({server:{baseDir: path.src}, port:3000, open:false
    }, function(){
        var homepage = 'http://localhost:3000/'; opn(homepage); }); // Listen for changes in files to compile in real time and refresh gulp.watch([path.html, path.js, path.css]).on("change".function() {
        gulp.start('js'.'css'.'img'.'html');        
        browserSync.reload();
    });
});

Copy the code

Effect of 3.

Github project source code

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

Attached: Vm layout and pictures of use refer to teacher Damo’s blog: “Talk about adaptation of Mobile Terminal Page again”