rem在项目中的具体使用分析
之前用到rem的地方很少，原理和具体使用不清晰，这次要好好总结一下。
先看一下rem的定义：
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
举个例子：
<!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>
页面运行的效果如下：
从上面例子可以得知：定义的HTML根元素的字体大小为12px，那么对应的 1rem=12px；如果设置的根元素的字体大小为24px，那么对应的1rem=24px；
对于rem的使用有了初步的认识，那看一下在项目中是怎么具体使用的吧。
之前项目中用的是
<script src="/static/js/flexible.js"></script>
现在
<script src="/static/js/zbui.flexible.js"></script>
是对flexible.js做了一个压缩和精简。
下面分析一下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)
}
})();
先分析一下zbui.flexible.js里面的具体实现：
return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 14.4), 8.55) + "px",
这段代码是设置HTML根元素的font-size大小。
解析如下：
var t = n.getBoundingClientRect().width;
t代表的是手机屏幕的宽度。
750代表的是UI设计图的宽度。
如果屏幕宽度是540px，那 t / 750 * 20 = 14.4;
如果屏幕宽度是720px，那 t / 750 * 20 = 20;
Math.min(t / 750 * 20, 14.4)这个最小值是14.4，所以定义的屏幕的最大宽度是540px ,如果屏幕的宽度大于540px，根元素的字体大小和屏幕宽度是一样的。
如果这个Math.min(t / 750 * 20, 14.4)的值小于8,.55，那么Math.max(Math.min(t / 750 * 20, 14.4), 8.55)的值就是8.55了，那这个时候t=320，也就是说屏幕小于320px时，按照320px来设置根元素的大小。
所以从以上可以得出：
设定的屏幕的宽度范围为：320px ~ 540px；
如果屏幕大于540px ,按照540px来，如果屏幕的宽度范围小于320px，那么这个时候按照320px来。
所以根元素的font-size大小范围为42.6px ~ 72px
1rem对应的范围大小是：42.6px ~ 72px
zbui.flexible.js这个文件的作用就是根据屏幕的大小来动态地设置根元素的font-size的大小，即动态地设置1rem的大小。
这样的话，在项目中使用rem时，根据屏幕的大小动态的设置元素的大小。实现移动端的自适应。
rem很强大！
本文地址：https://blog.csdn.net/xiaolinlife/article/details/109288470
上一篇： [解决方案]未能加载文件或程序集
下一篇： Moment.js学习笔记