rem在项目中的具体使用分析

之前用到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>

页面运行的效果如下:
rem在项目中的具体使用分析_第1张图片
从上面例子可以得知:定义的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很强大!

你可能感兴趣的:(项目总结,css,工作学习总结,rem,rem的具体使用,移动端的rem,移动端自适应)