之前用到rem的地方很少,原理和具体使用不清晰,这次要好好总结一下。
先看一下rem的定义:
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。其实rem布局的本质是等比缩放,一般是基于宽度。目前,除了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倍,字体大小为24pxp>
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;
如果屏幕宽度是750px,那 t / 750 * 20 = 20;
Math.min(t / 750 * 20, 14.4)这个最小值是14.4,所以定义的屏幕的最大宽度是540px ,如果屏幕的宽度大于540px,Math.min(t / 750 * 20, 14.4)这个值还是14.4。
如果这个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很强大!