响应式布局用px还是rem（rem与px的屏幕自适应争夺战）

东东评测 • 2022-07-08 20:33:27 • 软件

昨天文章中，有粉丝评论说现在移动设备那么多，使用rem的方式会比我的自适应的方式更好。于是我就查询资料，对着两方面进行了对比和验证。

先来说一下rem的适应方式的基本原理：简单来说，rem就是用根元素的字体大小作为单位来进行布局的方式。这样相当于有了一个全局的参考系，不用单独针对某一部分去进行特别处理，根据调整字体的大小达到自适应的目的。展示效果就是等比缩放。像素计算公式

1rem = 1px * html.fontsize（仅为逻辑公式，看懂就好）

具体参考如下：

通过css来实现适应变化

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="utf-8" /> 
		<title>无标题文档</title> 
		<style> 
			.abc{ height:3rem;width:30rem; border:1px solid #000; margin:0 auto} 
			html {
				font-size : 20px;
			}
			@media only screen and (min-width: 401px){
				html {
					font-size: 25px !important;
				}
			}
			@media only screen and (min-width: 600px){
				html {
					font-size: 26.75px !important;
				}
			}
			@media only screen and (min-width: 800px){
				html {
					font-size: 30px !important; 
				}
			}
			@media only screen and (min-width: 1000px){
				html {
					font-size: 35px !important; 
				}
			}
			@media only screen and (min-width: 1200px){
				html {
					font-size: 40px !important; 
				}
			}
		</style> 
	</head> 
	<body> 
		<div >CSS实例：DIV宽度会随浏览器宽度变化，改变浏览器宽度</div> 
	</body> 
</html>

通过js来实现，提供一个具体方法逻辑，试验的过程大家自行完成

function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;
	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}
	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
	refreshRem();
	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);
	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);
	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
};