vue2 mobile terminal adaptation--px to rem

Let's write about the use of the mobile webpage. When we get the 750px blue lake ui map, how can we make it adapt to the mobile terminal?

Step 1: We need to download two plugins: 'amfe-flexible'  and 'postcss-pxtorem'

npm install amfe-flexible postcss-pxtorem --save

amfe-flexible is a library for setting the rem baseline value. It can dynamically adjust the rem value according to the screen size to achieve the purpose of mobile adaptation.

postcss-pxtorem is a PostCSS plug-in that automatically converts px values ​​in CSS to rem values. It also supports functions such as specifying the conversion ratio between px and rem, and specifying attributes that do not need to be converted, allowing us to move easily. end adaptation.

The comprehensive use of amfe-flexible and postcss-pxtorem can easily achieve mobile adaptation without having to write different style codes for different screen sizes.

Step 2: Introduce the amfe-flexible package into main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
...
// 引入 amfe-flexible
import 'amfe-flexible';

Step 3: Create a postcss.config.js file in the root directory and write the following code

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 设计稿宽度的 1/10，例如设计稿宽度为 750px，则 rootValue 为 75
      propList: ['*'],
    }
  }
}

At this point, we have completed the adaptation of the mobile terminal and converted px to rem.