In w3c, rem is described in this way. Rem is calculated relative to the root element. We use rem as the unit of all sizes on the mobile side to solve the problem of adaptation.
How to configure flexible.js + rem layout (vue project) to solve the problem of adaptation, without further ado, just serve the food directly.
Install lib-flexible.js
npm install lib-flexible --saveIntroduce lib-flexible in the project entry file main.js
import 'lib-flexible'px automatically converts rem
Use webpack 's px2rem-loader to automatically convert px to rem
and install px2rem-loader
npm install px2rem-loader --save-devConfigure px2rem-loader
First find the build/utils.js file and add the following configuration in utils.js
The remUnit value is determined according to the design draft. Taobao’s Flexible.js divides the screen into 10 parts. The design draft is 375 x 667, so each 1 rem is equal to 37.5
Then find the generateLoaders method and configure it as follows in the function: px2remLoader
The most important thing here is to add px2remLoader to both positions in the above picture, otherwise it will not work! ! !
Annotate mate tags
Comment out the mate tag in index.html
In this way, the configuration of flexible.js + rem layout is completed, and the px in the code automatically becomes rem after compilation .
After installing px2rem, there are some differences when using px. You can refer to the official introduction of px2rem. The following is a brief introduction.
- Write px directly, and it will be directly converted into rem after compilation —— Except for the following two cases, use this for other lengths
- Adding /no/ after px will not convert px and will output as it is. — General border needs to use this
- Adding /px/ after px will generate three sets of codes according to the difference of dpr. —- General fonts need to use this
If there is any error in the description, please correct me!