Mobile page adaptation, rem and vw adaptation scheme
Base point: rem is relative to the font size of the root node. So no px;
Root font: font size px;
px: think of it as something like cm;
Benchmark: 750 design draft (general UI designers give 750 design draft);
tool
vue cli: use scaffold to build vue front-end project
Postcss: it is a tool that postcss uses js plug-in to help you convert css styles. For example, here, replace 16px in your file with 1rem (the default root size is 16px); So you don't have to do it yourself!
cssrem: it mainly helps you convert px(UI design to PX on the design draft) into the corresponding rem
Then: use js code to dynamically calculate the font size of the root directory. Anyway, it is a section of JS code to dynamically obtain the screen width
Install plug-ins
npm i postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url
Then index HTML with
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Add in the project root directory postcssrc.js file
module.exports = {
"plugins": {
"postcss-import": {}, //Use @ import to import css files
"postcss-url": {}, //Path to import css file or node_modules file
"postcss-aspect-ratio-mini": {}, //Used to handle the aspect ratio of element containers
"postcss-write-svg": { utf8: false }, //Solutions for handling mobile terminals 1px. The plug-in mainly uses border image and background to do 1px related processing.
"postcss-cssnext": {}, //The plug-in allows us to use the future features of CSS, which will do relevant compatibility processing for these features.
"postcss-px-to-viewport": { //Converting px units into windows units such as vw, vh, vmin or vmax is also one of the core plug-ins of vw adaptation scheme.
viewportWidth: 750, //The width of the window
viewportHeight: 1334, //Window height
unitPrecision: 3, //Convert px to the number of decimal places of the window unit value
viewportUnit: 'vw', //Specifies the window unit value to convert to
selectorBlackList: ['.ignore', '.hairlines'], //Specifies that the window unit value class is not converted. It can be customized and added infinitely
minPixelValue: 1, //Less than or equal to 1px is not converted to window units
mediaQuery: false //Allow px in media queries
},
"postcss-viewport-units":{}, //Adapting vw, vh, vmin and vmax is an essential plug-in to realize vw layout
"cssnano": { //It is mainly used to compress and clean CSS code. In Webpack, cssnano and CSS loader are bundled together, so you don't need to load it yourself.
preset: "advanced", //Repeat call
autoprefixer: false, //Both cssnext and cssnano have auto prefixers. In fact, only one is needed, so delete the default auto prefixer and set the auto prefixer in cssnano to false.
"postcss-zindex": false //As long as the plug-in is enabled, the value of z-index is reset to 1
}
}
} When you switch between screens of different sizes, you need to dynamically change the size of the root font. A simple js is inserted into the head: the Shipei directly created in the public directory js, and then introduce this js into index In the head of HTML
//shipei.js
(function() {
function autoRootFontSize() {
document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
// Take screen Width and document documentElement. getBoundingClientRect(). Minimum value of width; Divide by 750 and multiply by 32; Understand the Caesar, is originally 750 size 32px; If the screen size becomes 375px, the font is 16px; That is, the size of the root font fontSize is proportional to the screen size! Isn't it simple
}
window.addEventListener('resize', autoRootFontSize);
autoRootFontSize();
})();index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/public.css" type="text/css">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="/shipei.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Note that there is no need to write the initial directory for the things put in the public folder. I can't find them when the scaffold is packed. I will go to the public folder to find them
about
getBoundingClientRect().width is actually the distance from the right side of the parent to the browser origin (0,0) and the left side to the browser origin (0,0), that is, the width of the parent + 2ppadding + 2bolder.
At this time, the clientWidth is equal to the width of the parent + 2*padding, excluding the width of the border.
When the child content is not hidden, that is, the overflow is auto, the width of the former is still this number, because the parent does not adapt the box model. The width of the latter is the width obtained above - the width of the scroll bar (17px);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;">
<div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
height: 400px; width: 600px; border: solid 3px #f00;">
</div>
</div>
</body>
</html>
<script type="text/javascript">
/*
getBoundingClientRect().width What you get is actually the distance from the right side of the parent to the browser origin (0,0) and the left side to the browser origin (0,0), that is, the width of the parent + 2padding + 2bolder.
At this time, the clientWidth is equal to the width of the parent + 2*padding, excluding the width of the border.
When the child content is not hidden, that is, the overflow is auto, the width of the former is still this number, because the parent does not adapt the box model. The width of the latter is the width obtained above - the width of the scroll bar (17px); Examples are as follows:
*/
var divP = document.getElementById('divParent');
var divD = document.getElementById('divDisplay');
var clientWidth = divP.clientWidth;
var getWidth = divP.getBoundingClientRect().width;
divD.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';
divD.innerHTML += 'getWidth: ' + getWidth + '<br/>';
</script>The running result is that the clientWidth is 516, and its calculation is content width + 2padding
GetWidth (that is, getboundingclientrect() Width includes content width + 2padding + 2bolder
Step 5: convert px in the design draft into rem: install cssrem plug-in (in the plug-in market):
Then search cssrem in file -- > preferences -- > and set Root Font Size to 16