1, download AMFE-Flexible for mobile terminal adaptation

npm install --save amfe-flexible
Copy the code

2. Download postCSs-px2REM to convert PX to REM

NPM install postcss-px2rem --save After both plug-ins are downloaded, the package.json file will have both plug-insCopy the code

3. Introduce the amfe-Flexible plugin in main.js

4. Add meta to the index.html file in the public file

<meta name="viewport" Content ="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" Device-width height: same as width intial-scale: indicates the scale level of the visible area when the page is displayed for the first time. A value of 1.0 indicates the actual size of the page. No scaling maximum-scale=1.0, minimum-scale=1.0; The zoom level of the visible area, maximum-scale a program in which the user can enlarge the page, 1.0 will prohibit the user from enlarging beyond the actual size. User-scalable: Indicates whether the page can be scaled. No Disables scalingCopy the code

5. Set the size of the design draft in the vue.config.js file

If the design munit is 375 wide, it saves 37.5, and when it's configured, the page will be ready to adapt. Just get the styles in according to the dimensions of the design, and postCSS-Px2REM will automatically convert px to REM, but we can't modify the styles for thermal updates at this point, we need to configure them.Copy the code

6. Hot update