Lib-flexible + REM Based on VUE-CLI configuration for mobile-adaptive

Turn from: 1190000011883121

Have not contacted flexible's advice first look at this article in the desert so you will know why the length of REM, and the font to use PX

• Installing flexible

    lib-flexible --save

• Introduction of flexible

Add the following code to the project portal file Main.js, introducing the flexible

import ‘lib-flexible‘

• PX Turn REM

Automatically converts PX to REM using Webpack's Px2rem-loader

• Installing Px2rem-loader

npm install px2rem-loader --save-dev

• Configure Px2rem-loader

In the VUE-CLI generated file, locate the following file build/utils.js, such as add configuration

About importLoaders : If you have any questions, please refer to Webpack in depth and combat 4-4
2017.12.8 Update Note: If configuration is required importLoaders , refer to the bottom-most description.

• Px2rem usage

After installing Px2rem, then use PX on some different, we can refer to Px2rem official introduction, Below a brief introduction.

Directly write PX, after compiling will be converted directly to REM----except for the following two cases, other lengths with this
Added after PX, /*no*/ does not convert px and is output as-is. ---General border needs this
After the PX is added /*px*/ , three sets of code will be generated based on the different DPR. ----General font requires this

Sample code
Before compiling (write your own code)

.selector {    width: 150px;    height: 64px; /*px*/ font-size: 28px; /*px*/ border: 1px solid #ddd; /*no*/}

Post-compilation (packaged code)

. selector {Width2REM; border: 1px solid  #ddd;} [data-dpr= "1"] .selector {height: 32PX; font-size: 14PX;} [data-dpr= "2"] .selector {height: 64PX; font-size: 28PX;} [data-dpr= "3"] .selector {height: 96PX; font-size: 42px;}        

• Restart the project, you can happily use the PX on the design manuscript.

Note: Pit

• Cannot add name to viewport's meta tag on Index.html's head, flexible will be added to us automatically!

Update: The introduction of external css,px2rem can not convert REM problems

2017.12.8 Update : In the actual application found for the external introduction of the CSS file, sometimes px2rem can be normal conversion, and sometimes can not be converted, what is the reason? Three different kinds of CSS introduced into the situation, found that the first can be normal conversion, two or three can not be normal conversion, as for the reason, because of Caishuxueqian, or do not understand, ask the big God solution three ways to introduce the difference.

If you understand these methods, there is no need to reconfigure them cssLoader importLoaders , because the following method is easier to control whether the externally introduced CSS needs to go to REM, and the change importLoaders cannot be controlled, it will be cast.

<style src=‘../assets/style.css‘> /* px2rem能正常转换 */</style>

<style>  /* px2rem不能正常转换 */  @import ‘../assets/style.css‘;</style>

<style>  /* px2rem不能正常转换 */  @import url(‘../assets/style.css‘);</style>

Lib-flexible + REM Based on VUE-CLI configuration for mobile-adaptive