Use the plug-ins lib-flexible and postcss-pxtorem to adapt. There are two steps in total. When we are adapting, if we only divide the current screen into several parts, then when writing the style later, the unit of the style It needs to be written as rem, but here we will automatically convert the px unit we wrote into the unit of rem after we complete the postcss-pxtorem adaptation
Plug-in role:
lib-flexible: automatically divide the current screen into tenths
postcss-pxtorem : automatically convert px to rem (note: the unit of inline style cannot be converted )
Not much nonsense, let's look at the adaptation steps first
Configure the lib-flexible package
1. Download the lib-flexible package
npm i [email protected] -S2. Configuration
a. Find the lib-flexible package file in node_modules
b. Find the flexible.js file, search for 540, change 540 to width in the following function, and then the font-size of html will become one-tenth of the current screen
Configure the postcss-pxtorem package
1. Download postcss-pxtorem package
2. Create a .postcssrc.js file in the root path (at the same level as main.js)
a. Configure in this file and modify the value of rootValue
// postcss 配置文件
module.exports = {
// 配置需要使用的postcss插件
plugins: {
'postcss-pxtorem': {
rootValue: 144, // 这里应该 UI 图的十分之一
propList: ['*']
}
}
}Then the following can be written directly according to the UI diagram