rem layout and introduce js code into the page.
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth > 1024) {
docEl.style.fontSize = 100 * (1024 / 375) + 'px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)This is the core code of rem layout. This code means:
If the width of the page exceeds 640px, the font size of html in the page will always be 100px. Otherwise, the font size of html in the page is: 100 * (current page width / 640).
1. Why 640px
For the mobile phone screen, the page width of 640px is a safe maximum width, which ensures that there will be no blank on both sides of the mobile terminal page. Note that PX here is a css logical pixel, which is different from the physical pixel of the device. For example, iPhone 5 uses Retina retina screen, and 2px * 2px device pixel represents 1px * 1px css pixel, so the device pixel is 640 * 1139px, while its css logic pixel is 320 * 568px.
If you want to cut and move the page, you can first scale the rendering width to 640px.
2. Why set the font size of html?
Rem is the font size of the root element (that is, html). All tag styles in html that involve size (such as height, width, padding, margin, font size, etc.) can use rem as the unit.
If you set the font size of html to 20px, 1rem=20px.
At this time, the element style of 60px wide and 40px high is set as follows ↓
width: 3rem; height: 2rem;
Do you find it a little troublesome to convert. What if we set the font size of html to 100px at the beginning? At this time, 1rem = 100px, then the upper element style with width of 55px and height of 37px can be set as follows ↓
width: 0.55rem; height: 0.37rem;
Why not set the font size of html to 1px at the beginning, so it is easy to convert?
A: browsers generally have a minimum font limit. For example, Google browser, the minimum Chinese font is 12px, so there is no way to make 1rem=1px.
According to the above js code, if the page width is less than 640px, the font size of html in the page will also change according to the proportion of (current page width / 640). In this way, all elements in the page with rem as the size unit will be scaled equally with the change of the page!
3. What are the situations where rem layout can be used?
In most cases, you can use REM layout. Of course, the specific situation depends on the situation. Generally, the navigation bar does not use rem, but uses flex layout. This is because the navigation bar has the most clicks, so it is given a fixed size (fixed height and adaptive width). You can look at this mobile page of Taobao Taobao mobile station This is basically the feeling. The bottom navigation and the top search box use the high fixed and wide adaptive scheme, and the rest are basically scaled in equal proportion with the browser width.
The final page code and home page code are roughly as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
/*The resources you brought in*/
<title>title</title>
</head>
<body>
/*Your code*/
</body>
</html>Reprint: https://www.jianshu.com/p/b00cd3506782