2021-05-12

Px，rem，em的区别
​ 1，px，绝对长度单位，像素px是相对于显示器屏幕分辩率来说的

​ 2，em，相对长度单位，相当于当前对象内文本的字体大小

​ em的值并不是固定的，会继承父级元素的字体大小，字体大小参照与父元素的大小决定

​ 3，rem，相对于HTML根元素的font-size

​ 1em=1rem=16px

​ 在body中加入font-size：62.5% 这样直接就是原来的px数值除以10加上em就可以

rem自适应原理

rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。更多介绍请看这篇文章：rem是如何实现自适应布局的。

rem的值

目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。

使用js

;(function(designWidth, maxWidth) {
	var doc = document,
		win = window;
	var docEl = doc.documentElement;
	var tid;
	var rootItem,rootStyle;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		if (!maxWidth) {
			maxWidth = 540;
		};
		if (width > maxWidth) {
			width = maxWidth;
		}
		//与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
		var rem = width * 100 / designWidth;
		//兼容UC开始
		rootStyle="html{font-size:"+rem+'px !important}';
		rootItem = document.getElementById('rootsize') || document.createElement("style");
		if(!document.getElementById('rootsize')){
		document.getElementsByTagName("head")[0].appendChild(rootItem);
		rootItem.id='rootsize';
		}
		if(rootItem.styleSheet){
		rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
		}else{
		try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
		}
		//兼容UC结束
		docEl.style.fontSize = rem + "px";
	};
	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);
	}
})(640, 640);

你可以把上面的代码内嵌到html的head中，换算比例是1rem=100px，为了计算方便，你可以在我的一个github项目下载完整的结构和一个压缩的js。

项目主页

上面代码中的关键代码是：

//code from http://caibaojian.com/rem-responsive-2.html
var width = docEl.getBoundingClientRect().width;
var rem = width * 100 / designWidth;
docEl.style.fontSize = rem + "px";

• 第一行代码，获取移动设备的宽度，第二行，rem的值等于(设备的宽度)x100/(设计稿宽度)，第三行，设置html的字号为第二行的值。
• 有些人可能会注意到第二行代码跟淘宝的那个有所区别，区别就在于rem的换算比例，这里你可以任意改动为实际中的情况，比如有人喜欢用20px，那你可以将上面的100改为20，换算比例则改为1rem=20px。关于上面这段代码可以看之前的文章：Rem精简版实现自适应。
• 还有的人要用回淘宝的那个，那么第二行代码可以变为var rem = width/10; 换算比例则改为根据设计稿的宽度来调整了，假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。具体实现请看之前的文章：rem自适应布局-flexible。