Installing lib-flexible

Execute this command in your project directory:

npm install lib-flexible --save

Importing lib-flexible

Add this line to your main.js file:

import 'lib-flexible/flexible';

Configuring Viewport Meta Tag

Include this meta tag in your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

Adding postcss-pxtorem

Install the plugin as a development dependency:

npm install postcss-pxtorem --save-dev

Setting Up postcss-pxtorem

Modify the .postcssrc.js configuration file:

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

Ensure postcss-loader processes node_modules to compile Vant styles.

Note on rootValue:

• Set to 37.5 when using Vant UI since its components use px units.
• This matches Vant's base font size (37.5px = 1rem).
• Scale custom designs by halving pixel measurements from a 750px design.

Restart Development Server

Aply changes by rsetarting:

npm run dev