Purpose: How does Vant UI and design work together on mobile

❓ How to REM adaptation

NPM I amfe-flexible # is flexibleCopy the code

main.js

import 'amfe-flexible'
Copy the code

==REM adaptation principle == : use media query or JS dynamic detection of the width of the set, set the corresponding root element font size under different width, so that all elements using REM as a unit naturally follow the change!

❓ How to convert written PX to REM

NPM install postcss-pxtorem@5 -d # -d # yarn add postcss-pxtorem@5 -d # yarn add postcss-pxtorem@5 -dCopy the code

Create.postcsrc. Js in the root directory

Module. exports = {plugins: {'postcss-pxtorem': {rootValue: 37.5, propList: ['*']}}}Copy the code

What is ❓ PostCSS

PostCSS is to CSS what Babel is to JS. PostCSS can handle CSS with the help of various plug-ins, compilers for CSS, and Vue CLI for CSS

❓ encountered the problem, the base value is set to 37.5 or 75, found that it is not

Vant UI design draft 375 is divided into 10 copies with flexible. Js, so the base value is 37.5

The design draft 750 provided by our designer to me (because it is designed according to the size of iPhone6, and the physical pixel of iPhone6 is 750, for high definition) is divided into 10 copies with flexibs.js, so the reference value is 75

Why is the Vant UI based on 375px? Don’t people know about hd? ?

Hd hd is mainly for the picture! Vant UI is a UI library that doesn’t involve images or anything like that!

🎈 How to solve the problem of setting the base value?

The postCSs-pxtorem plugin allows you to specify rootValue as a function and take the parameter file, which represents the path of the file to be processed. If the file contains the string ‘vant’, the vant base value should be 37.5 if the file contains the description and the vant base value should be 75 if the file does not contain the description and the vant base value should be 75

module.exports = { plugins: { 'postcss-pxtorem': {rootValue ({file}) {// file => path to the style to compile return file.includes('vant')? Rem propList: ['*']}}}Copy the code