VUE PC terminal mobile terminal REM adaptation

requires two plugins 

lib-flexible for setting rem benchmarks;

postcss-pxtorem is a postcss plugin for converting units to rem;

Install lib-flexible

cnpm i amfe-flexible

Referenced in main.js

import 'amfe-flexible'

install postcss-pxtorem

cnpm install postcss-pxtorem -D

vue2, then create a .postcssrc.js file in the project root directory:

module.exports = {
  plugins: {
    'autoprefixer': {
       browsers: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*'],
      selectorBlackList: ['norem']
    }
  }
}

In vue3+vite:

Configure in vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer';
import postCssPxToRem from 'postcss-pxtorem';
export default defineConfig({
  plugins: [vue()],

  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
        }),
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    },
  }
})

 

` rootValue` : Indicates the font size of the root element, which will perform unit conversion according to the size of the root element

Set to one-tenth of your design draft.

For example, if the design draft is 750 wide, it should be set to 75.

` propList` is used to set properties that can be converted from px to rem  

For example, `*` means that all attributes should be converted, and `width` means that only the `width` attribute should be converted