Convert mobile XP to REM using Gulp

Using Gulp plug-ins can easily turn XP into REM, in the layout of the use of @1x, @2x layout, that is, the 10rem=device-width;@1x is designed to 320px,1rem corresponding 10px pixels, the relative @2x is the layout using 640px layout , 1rem=20px pixels; However, the browser has the default minimum font, Google Chrome default minimum font size is 12px, so 1x size settings may be problematic, most still use 2x layout method;

Before reading this article at least to use gulp, you can go to the Chinese network first understand the basic use of writing gulp, I also summarize the use of Gulp method, After you have summed up your own Gulpfile.js file can be configured to complete the front-end of the project, so maybe someday in the future, we just need to open the command line to run Gulp can finish the day in addition to the work of the Code, think it is cool.

1, in cmd or Linux git base here, install NPM installation gulp-cli-g globally
2. Create a file anywhere, name it yourself then open cmd or git Base hear under this file and then enter the command NPM install Gulp-uglify
3, and then in the input command
NPM Install Gulp--"can only be used in the current file
NPM Install-g Gulp can be used under any directory Gulp

4, install Px2rem module NPM install gulp-px2rem-plugin --save-dev

5. Write the gulpfile.js file in the root directory of the project

 /*  * * Created by Jason on 2016/11/19.  */ var  gulp = require ( " gulp   "  var  Px2rem = require ( " gulp-px2rem-plugin  "    " default   '    " *.css   " ). PIPE ( Px2rem ())});  

6, enter Gulp in the command line, so that the basic functions can be implemented,

To match the implementation of this code, you can add the resize function to your code (in the JS file of the project code) to dynamically calculate REM

       (function (doc,win) {            function change () {                Doc.documentElement.style.fontSize= doc.documentelement.clientwidth*/++'px';            }            Change ();            AddEventListener ('resize', change,false);        }) (Document,window);

In addition, Sublime also has the automatic input PX can be turned to REM plug-ins, when writing CSS files automatically converted to REM, but in this way, in the later revision or revision of the time to modify one of the parameters I feel is still very troublesome.

But interested can try, after all, than we have a calculator to cut the phone map is still much better;

Reprint please specify ' reproduced in Jason Qi Qi's blog http://www.cnblogs.com/jasonwang2y60/'

Convert mobile XP to REM using Gulp