rem比例使用分析

最新推荐文章于 2023-04-24 22:00:41 发布

Rookie_a

最新推荐文章于 2023-04-24 22:00:41 发布

阅读量941

点赞数 1

分类专栏： rem 响应式布局文章标签： css html javascript

本文链接：https://blog.csdn.net/Rookie_a/article/details/110843503

版权

rem 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

响应式布局

1 篇文章 0 订阅

订阅专栏

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>

之前项目中用的是

<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很强大！

Rookie_a

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem比例使用分析

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。<
复制链接

扫一扫