Vant realizes the adaptation of mobile terminal

 Recently, the company did a mobile terminal project , Need to fit , The framework itself provides vue-cli3.0 combination lib-flexible and px2rem A scheme to realize mobile terminal adaptation , Here is a record of how you do the adaptation . 

Introduce postcss-pxtorem Is a postcss plug-in unit , Used to convert units to rem amfe-flexible Used for setting up rem
At baseline

1. install amfe-flexible

 1. npm i -S amfe-flexible

2. stay main.js Introduce in the file lib-flexible

import 'amfe-flexible/index.js'

3. install postcss-pxtorem

 npm install postcss-pxtorem --save-dev

4. stay public/index.html Join in meta label

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

5. Project configuration postcss
stay package.json Add such a piece of code

"postcss": {
    
		    "plugins": {
    
		      "autoprefixer": {
    
		        "overrideBrowserslist": [
		          "Android 4.1",
		          "iOS 7.1",
		          "Chrome > 31",
		          "ff > 31",
		          "ie >= 8"
		        ]
		      },
		      "postcss-pxtorem": {
    
		        "rootValue": 37.5,
		        "propList": [
		          "*"
		        ]
		      }
		    }
		  }

This completes the adaptation , It should be noted that ,css Inside we just need to write px, Then it will be automatically converted to rem Show in browser ,rootValue Set to 37.5, The reason why it is set to 37.5, To quote something like vant Such a third party UI frame , Because the third-party framework is not compatible rem, It's using px Company , take rootValue The value of is set to the width of the design drawing （ Here for 750px）75 Half of , That is to say 1:1 Restore vant、mint-ui The components of , Otherwise, the style will change , For example, the button will become smaller . Now that it's set to 37.5 Then we must write the style , Also change the value to half of the design drawing .