Mobile adaptation is we often encounter in the development, but there are often many problems in the adaptation process, and also need to write JS logic to calculate the size of different mobile phones, etc., the main record is a relatively simple and easy to use method: PxtoREM

First, install the required plug-ins

npm install --save lib-flexible
npm install postcss-pxtorem@5.11. -D 
pm install postcss postcss-loader -D
Copy the code

Global import in main.js

import "lib-flexible/flexible.js";
Copy the code

3. Configure in vue.config.js

const autoprefixer = require('autoprefixer') 
const pxtorem = require('postcss-pxtorem')
module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            plugins: [
              autoprefixer(),
              pxtorem({
                rootValue: 75.// Root font size, if the design is 750
                unitPrecision: 5.propList: [The '*'].// What attributes are applied to? I'm using wildcards here
                replace: true.mediaQuery: false.minPixelValue: 0.exclude: /node_modules/i})]}}}}Copy the code