There are few places where rem is used before, and the principle and specific use are not clear. This time, I should summarize it.
Let's take a look at the definition of
rem : rem is a new relative unit (root em, root em) added to CSS3 . This unit has attracted widespread attention. What is the difference between this unit and em? The difference is that when using rem to set the font size for an element, it is still a relative size, but the relative size is only the HTML root element. This unit can be said to combine the advantages of relative size and absolute size. Through it, all font sizes can be adjusted proportionally only by modifying the root element, and it can also avoid the chain reaction of font size compounding layer by layer. At present, all browsers support rem except IE8 and earlier versions. For browsers that do not support it, the solution is also very simple, which is to write an absolute unit declaration. These browsers ignore the font size set with rem.
for example:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>rem_CSS参考手册_web前端开发参考手册系列</title>
<style>
html,h1{
font-size:12px;}
p{
font-size:2rem;}
</style>
</head>
<body>
<h1>下面的文字将是html定义的字体大小的2倍：</h1>
<p>我是html定义的12px的2倍，字体大小为24px</p>
</body>
</html>
Effect page runs as follows:
From the above example can be learned: HTML root element defines the font size 12px, then the corresponding 1 rem = 12px ; root element if the font size is set 24px, then the corresponding 1 rem = 24px ;
for With a preliminary understanding of the use of rem, let's take a look at how it is used in the project.
The previous project used
<script src="/static/js/flexible.js"></script>
just now
<script src="/static/js/zbui.flexible.js"></script>
It is a compression and streamlining of flexible.js.
Let's analyze the specific implementation of zbui.flexible.js.
! function(e) {
var t = e.document,
n = t.documentElement,
i = "orientationchange" in e ? "orientationchange" : "resize",
a = function e() {
var t = n.getBoundingClientRect().width;
return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 14.4), 8.55) + "px", e
}();
n.setAttribute("data-dpr", e.navigator.appVersion.match(/iphone/gi) ? e.devicePixelRatio : 1), /iP(hone|od|ad)/.test(e.navigator.userAgent) && (t.documentElement.classList.add("ios"), parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8 && t.documentElement.classList.add("hairline")), t.addEventListener && (e.addEventListener(i, a, !1), t.addEventListener("DOMContentLoaded", a, !1))
}(window);
// 默认为320-420范围，改成了320-540，与其他平台保持一致。
(function() {
// 备案链接隐藏按钮
if (/^\/mprod/.test(location.pathname)) {
var style = document.createElement("style");
var textNode = document.createTextNode('body footer button {display: none !important}');
style.appendChild(textNode);
document.head.appendChild(style)
}
})();
First analyze the specific implementation in zbui.flexible.js:
return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 14.4), 8.55) + "px",
This code is to set the font-size of the HTML root element.
The analysis is as follows:
var t = n.getBoundingClientRect().width;
t represents the width of the mobile phone screen.
750 represents the width of the UI design drawing.
If the screen width is 540px, then t / 750 * 20 = 14.4;
if the screen width is 720px, then t / 750 * 20 = 20;
Math.min(t / 750 * 20, 14.4) The minimum value is 14.4, so define The maximum width of the screen is 540px , if the width of the screen is greater than 540px, the font size of the root element and the screen width are the same.
If the value of Math.min(t / 750 * 20, 14.4) is less than 8,.55, then the value of Math.max(Math.min(t / 750 * 20, 14.4), 8.55) is 8.55, then this When t=320 , that is to say, when the screen is smaller than 320px, set the size of the root element according to 320px.
So it can be concluded from the above: the
set screen width range is: 320px ~ 540px;
if the screen is larger than 540px, it will be 540px; if the screen width is less than 320px, then it will be 320px.
So the font-size range of the root element is 42.6px ~
72px The corresponding range size of 1rem is: 42.6px ~ 72px
The function of the zbui.flexible.js file is to dynamically set the font-size of the root element according to the size of the screen, that is, dynamically set the size of 1rem.
In this case, when rem is used in the project, the size of the element is dynamically set according to the size of the screen. Realize the adaptation of the mobile terminal.
rem is very powerful!