欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-23 11:18:07
移动端都是要做屏幕适配的,下面我们来看一下rem在项目中是怎么具体运用的以及它的详细原理。之前项目中用的是现在是对flexible.js做了一个压缩和精简。下面分析一下zbui.flexible.js的具体实现。! function(e) {var...

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

页面运行的效果如下:
rem在项目中的具体使用分析
从上面例子可以得知:定义的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