In H5 project, the first consideration is to use the Vuant-UI framework, but some functions need to be customized, and the display of different devices should be considered, so WE plan to introduce rem layout

1 If requiredremYou are advised to use the following two tools for unit adaptation:

  • Postcss – Pxtorem is a postCSS plugin for converting PX units to REM units
  • Amfe-flexible, used to set REM reference value

2AMFE-flexible was introduced into the project

// main.js
require('amfe-flexible/index')
Copy the code

Since the project already uses ant-UI, will it be a problem to introduce the above two tools directly?

  • If the design size is 375, what’s wrong with using it
  • If the size of the design is 750 instead of 375, you need to convert the PostCSS to the following ↓
css: {
  loaderOptions: {
    postcss: {
      plugins: [
        require('postcss-pxtorem') ({// Convert px units to REM units
          rootValue:75.// Vant officially uses 37.5
          //selectorBlackList: ['van'], // Label name starts with van, does not convert rem
          propList: [The '*']})]}}Copy the code