Vue uses lib-flexible and postcss-px2rem-exclude to solve mobile adaptation problems
1. Ideas
The fundamental idea to solve the problem of mobile terminal adaptation is to convert px into rem
⑴ Use postcss-px2rem-exclude to automatically convert px in the project into rem
⑵ and amfe-flexible can perform corresponding HTML root according to different models of mobile phones Initialization of the node (font-szie).
Two, steps
-
安装 postcss-px2rem-exclude、amfe-flexible
cnpm install postcss-px2rem-exclude amfe-flexible --save -
Import amfe-flexible import 'lib-flexible' in main.js in Vue project -
Configure postcss-px2rem-excluded
to create a .postcssrc.js file in the root directory and configure it as follows:
module.exports = {
plugins: {
autoprefixer: {
},
'postcss-px2rem-exclude': {
remUnit: 75,//1rem = 75px(iphone6的设计稿如此设置)
exclude: /node_modules/i //忽略node_modules目录下的文件
}
}
}
How to set the value of remUnit:
amfe-flexible sets the font-size according to one tenth of the screen width, so the size setting of our remUnit should also be one tenth of the width of the design draft, so that the css style will be consistent with the design The draft is the same.
lib-flexible will automatically add a meta name="viewport" tag in the head of the html, and will automatically set the font-size of the html to be the screen width divided by 10, that is, 1rem is equal to the font- size. Therefore, the size setting of our remUnit should also be one-tenth of the width of the design draft, so that the css style will be the same as the design draft.
If the width of the design draft is 750px, then 1rem should be equal to 75px. (If remUnit is set to 75, but the setting draft is 375px, we need to multiply the size of the design draft by 2 to match when setting the size in css) If the width of the design draft is 375px, 1rem should be equal to 37.5px
.