By default, styles in Vant use px units. If you want to use REM units, the following two tools are recommended:

  • Postcss – Pxtorem is a postCSS plugin for converting PX units to REM
  • Lib-flexible Specifies the REM reference value

Set REM reference values dynamically using lib-flexible.

1. Install

# yarn add amfe-flexible
npm i amfe-flexible
Copy the code

2. Then load and execute the module in main.js

import 'amfe-flexible'
Copy the code

Change pxto REM using postCSs-pxtorem

1. Install

# yarn add -d postcss-pxtorem # -d is short for --save-dev NPM install postcss-pxtorem -dCopy the code

2. Create the.postcsrc. Js file in the project root directory

/** * PostCSS plugins */ module.exports = {// PostCSS plugins: {// Configures using autoprefixer plugin // functions: // VueCLI has configured autoprefixer plugin internally // So it is configured again, so there is a conflict // 'autoprefixer': {// Configuration of the autoprefixer plug-in // // Are built with environmental information to be compatible with // Browsers: ['Android >= 4.0', 'iOS >= 8'] // configure the use of postcss-pxtorem plugin // function: {// lib-flexible REM adaptation: // Our design is 750, so it should be set to 750/10 = 75 // But Vant suggests 37.5, why? Since Vant is written based on 375 // it must be set to 37.5, the only drawback is that the size of our design must be / 2 // is there a better way? // If it is Vant, convert it to 37.5. // If it is our own, convert it to 75. // After checking the documentation, we found that rootValue supports two types: // number: fixed number // function: // postcss-pxtorem calls this function when each CSS file is processed // it passes information about the CSS file being processed to this function with arguments // file:  vant-button.css // file : login.vue rootValue({ file }) { return file.indexOf('vant') ! = = 1? 37.5:75}, // rootValue: 75, // Configure CSS properties to convert // * represents all propList: ['*']}}}Copy the code

3. Restart the service