demand
- Mobile terminal adaptation
- pc side adaptation (within a certain screen range)
Implementation principle
Using amfe flexible and postcss px2rem dependency packages, PX is automatically converted to REM after the project is compiled, and the font size value of html will be changed dynamically according to the screen size
If you want to understand the principle of rem's adaptive implementation, you can Google by yourself. I won't talk about the principle here
It doesn't matter if you don't understand the principle. You can follow the operation below.
Implementation tutorial
The first step is to install component dependencies
npm install amfe-flexible -S npm install postcss-px2rem -S
The second step is to introduce lib flexible js
The following is a vue project as an example
In the entry file main JS
import "amfe-flexible/index.js";
Step 3: in the directory public / index Add the following line to the HTML file
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Step 4: configure postcss-px2rem
If it's a vue-cli3 built project, find Vue. Cli3 in the root directory config. JS file, (if not found, create a new one)
The configuration contents are as follows
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}Put the above code into module Exports = {}, in curly braces
The complete code is as follows:
module.exports = {
// Basic path
publicPath: './',
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
},
// agent
devServer: {
port: 8080,
// host: 'localhost',
https: false, // https:{type:Boolean}
open: true, // Configure auto start browser
disableHostCheck: true,
"proxy": {
"/*": {
"target": "http://xxx",
"changeOrigin": true
}
}
},
}The above remUnit: 75, the setting here is 75, that is, the design drawing is 750px. If your design drawing is 640px, you can change it to 64. If your design drawing is 1920px, you can change it to 192
If your project is vue-cli2 built
Installation depends on postcss pxtorem
npm i -D postcss-pxtorem
Find the root directory postcssrc.js file and add the following code:
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 75,
propList: ['*', '!border*']
}
}
}propList indicates matching attributes (indicating matching all attributes) and can be used in it! Border means no border is provided, which will not change the border 1px to 1rem
You don't want to convert px to rem in css. You can write / no / comment after the style
.nav {
width: 400px;
height: 300px;
background: red;
border: 1px solid black; /*no*/
}After the above configuration, open the compiled page of your project, open the debugging page and change the width. The font size value of html changes in real time, and the css px value you write is automatically converted to rem
The fifth step is to make an adaptive solution on the pc side
The above is fully adaptive. If you want to control the adaptive range, for example, if you want to adapt between 1300px and 1800px in a pc project, set a fixed HTML font size value if it is less than 1300px and a fixed HTML font size value if it is greater than 1800px
In this way, the page of pc project layout will not be reduced or enlarged all the time
The key principle is to control through media query. The code is as follows. Write it in your public style (or global style) file
/* When the screen is larger than 1800px, the font size value of html is 200px */
@media screen and (min-width: 1800px) {
html {
font-size: 200px !important;
/*no*/
}
}
/* When the screen is less than 1300px, the font size value of html is 130px */
@media screen and (max-width: 1300px) {
html {
font-size: 130px !important;
/*no*/
}
}The above is just an example. You don't need to set it on the mobile terminal. On the pc terminal, you can adjust it according to your project page
vite packaged project configuration
Create a new postcss config. JS file, the following code
Installation depends on postcss pxtorem
npm i -D postcss-pxtorem
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 192,
propList: ['*', '!border*']
}
}
}Root directory creation Browserlistrc file
last 2 versions > 1% iOS 7 last 3 iOS versions
Remember to write the first three steps!!!
Stepping on pits and solving
When you use webpack to package, if you write / * no * /, you don't want px to be converted to rem, such as the code mentioned above
/* When the screen is larger than 1800px, the font size value of html is 200px */
@media screen and (min-width: 1800px) {
html {
font-size: 200px !important;
/*no*/
}
}This px does not convert to rem depends on the annotation, but the annotation will be removed when the production environment is packaged, which will lead you to write / * NO * / this css attribute without conversion, which will have no effect. If the annotation is deleted in the packaging, it will automatically transfer it for you.
Solution 1 You can write the style to index In the style tag of the HTML file
This packaging will not delete index HTML css annotation, if your webpack also puts index If the HTML comments are deleted, you can delete the index.html through webpack HTML does not delete comments. This self Google search does not pack and compress index HTML file, my project will not delete index HTML comments
Solution 2 Configure sass loader so that all css comments are not deleted during packaging
Reference article: Annotation invalidation in postcss-px2rem production environment in webpack
Reference articles