The mobile terminal in Vue uses postcss-px2rem and lib-flexible to solve adaptive

The mobile terminal of the front-end page inevitably needs to adapt the height, width, font size, etc. If you write rem directly, it will be very troublesome. The front end also needs to transfer the rem writing style according to the design drawing, which will be very troublesome and difficult to maintain. This article will introduce the automatic conversion of front-end writing px pixel unit to rem unit.

Add dependency postcss-pxtorem

yarn add postcss-pxtorem 或 nmp install postcss-pxtorem

Add dependency lib-flexible

yarn add lib-flexible 或 npm install lib-flexible

Add the following configuration in package.json

"postcss": {
    
    
    "plugins": {
    
    
      "autoprefixer": {
    
    },
      "postcss-pxtorem": {
    
    
        "rootValue": 75,//根据设计图尺寸写，设计图是750，就写75
        "selectorBlackList": [//不进行px转换的选择器
          "van"//表示van框架不转换px
        ],
        "propList": [
          "*"
        ]
      }
    }
  },

Introduce lib-flexible in main.js

// rem转换
import 'lib-flexible/flexible.js'

In this way, the front-end page writes px and actually runs using rem.

Of course, you don’t want to convert a certain line of code, such as border:1px solid #eee. If you write and convert this way, some models are a bit problematic, then you can directly use 1PX (uppercase) To replace, then the page displays 1PX instead of rem, then there is no problem.