Vant’s lightweight, reliable library of Vue components on mobile

Browser adaptation

Viewport layout

By default, Vant uses PX as the style unit. If a viewport unit (vw, vh, vmin, vmax) is required, postCSs-px-to-viewPort is recommended.

Postcss-px-to-viewport is a postCSS plugin that converts PX units to VW/vH units.

PostCSS PostCSS example configuration

The following provides a basic PostCSS sample configuration that can be modified based on project requirements.

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};
Copy the code

Tips: Avoid ignore node_modules directory when configuring postCSS-loader, otherwise Vant styles will not compile.

Rem layout adaptation

If you need to use REM units for adaptation, you are advised to use the following two tools:

Postcss-pxtorem is a postCSS plugin for converting rem units to REM lib-flexible for setting REM reference values. PostCSS Configuration 1. Create a postcss.config.js file in the root directory

2. Download

npm install postcss-pxtorem --save-dev
Copy the code

3. Paste the following code snippet in postcss.config.js

Module. Exports = {plugins: {'autoprefixer': {browsers: ['Android >= 4.0', 'iOS >= 7']}, 'postCSS-pxtorem ': Browsers: {plugins: {'autoprefixer': {browsers: ['Android >= 4.0', 'iOS >= 7']},' postCSs-pxtorem ': PropList: ['*']}}}Copy the code

Set the base value lib-flexinle

1. Download

 npm i -S amfe-flexible
Copy the code

2. Import in main.js

 import 'amfe-flexible'
 
Copy the code

And that completes the adaptation

Other dimensions of design draft

If the design size is not 375, but 750 or some other size, change the rootValue configuration to:

// postcss.config.js module.exports = {plugins: {// postcss-pxtorem plugins need to be >= 5.0.0 'postCSs-pxtorem ': { rootValue({ file }) { return file.indexOf('vant') ! = = 1? 37.5:75; }, propList: ['*'], }, }, };Copy the code

Matters needing attention:

The plug-in cannot convert px in inline styles, for example

<div style="width: 200px;" ></div>Copy the code

Postcss-pxtorem 插件 图 片

RootValue: Indicates the font size of the root element, which is converted in units based on the size of the root element

PropList is used to set properties that can be converted from PX to REM

For example, * is all attributes to be converted

The Vant is written based on 375, so rootValue is 37.5, and if your draft is 750 you need to set it to 75

Last but not least, restart the project after the configuration is complete