Take you to understand in 5 minutes: mobile rem adaptation of vue project

This article briefly introduces the rem adaptation preparation for the mobile terminal of the vue project.

First of all, the mobile terminal must use the vant component library. Before developing the mobile terminal, rem adaptation is usually done. Of course, vw adaptation is also possible. Here is a brief introduction to rem adaptation.

First look at the introduction on the vant official website

These two plugins are required:

Step 1: Install

npm i amfe-flexible

Step 2: Reference (reference it in main.js)

import 'amfe-flexible'

Step 3: Look at the effect, you can see a font-size: 37.5px on the browser

At this time, some students will ask, this is not enough, why install another postcss-pxtorem

I don’t know if you have noticed that at this time, we only changed the root font size of the webpage to 37.5px, but the width, height and other styles on the webpage still use px, that is to say, it has not yet taken effect. At this time, we need to change the left and right The size is automatically converted to rem

postcss-pxtorem is here to achieve this function, you don’t need to manually calculate how much rem each px is equal to

Two, configure postcss-pxtorem

step one:

npm install postcss-pxtorem -D

Step 2: Then create a file the project root directory.postcssrc.js

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

.postcssrc.jsTo explain, the postcss-pxtorem plugin will automatically look for the folder named under the root directory to select the corresponding configuration (if some students see my previous configuration about eslint, you will find that all plugin configuration files are There is an rc added at the back, if you are interested, you can turn to the front)

Among them, 37.5 is calculated according to the design draft of 375. If it is a design draft of 750, if you write 37.5, you need to manually divide it by two when measuring, otherwise it will be very big! If you write 75, the vant component library will become very large, because the vant component library is designed according to 375, so it will be very troublesome. Is there a convenient way to write it?

That must be there, just modify the configuration file of postcss directly to the following code:

/**
 * PostCSS 配置文件
 */

module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用：生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次，所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },

    // 配置使用 postcss-pxtorem 插件
    // 作用：把 px 转为 rem
    'postcss-pxtorem': {
      rootValue ({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
}