rem设置方法、基准值技巧以及浏览器兼容

一、介绍

rem是CSS3中新增的度量单位，全称是“ font size of the root element”，翻译过来是根元素字体大小，所以它其实是一个相对于html的相对单位。

二、适用场景

主要用于做移动端屏幕适配，因为不同手机型号的屏幕大小不同，如果我们在写移动端页面的时候，再使用px，就不合适了，因为同样的100px，在大屏幕或者分辨率高的屏幕上，可能只会占据一小部分，但在小屏上，可能就会占据一大部分。

iphone6

iphone6 plus

从上面的例子我们可以看出，同样的200px，在不同的设备上的区别。

三、设置方法

//字体适配
(function(win) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		// console.log(width)
		if (width > 1200) { // 最大宽度
			width = 1200;
		}
		var rem = width / 12;
		docEl.style.fontSize = rem + 'px';

	}
	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 10);
	}, false);
	refreshRem();
})(window);

设置方法其实很简单，js获取屏幕宽度，然后经过计算，将计算后的值赋值给html根元素的font-size即可。

四、技巧及兼容

这里需要说到一个小技巧，就是这个计算后的值，最好设置一个大一些的整数，比如说你的设计稿如果是375宽的，那最好设置为375/3.75，这样1rem在375宽的屏，就是100px，设置成整数的好处是，px和rem之间好换算，设置大一点的值是因为，在移动设备上，也有跟Chrome一样的对于根字体大小的限制问题，Chrome最小字体是10px，部分移动设备，也会设置最小字体，比如华为Mate30，它的微信内置浏览器的最小字体是8px。

如上图，我设置的根字体是3px，而移动设备默认最小字体是8px，我写的样式，在这台设备上渲染页面就会出现问题，解决方案就是把根字体设置的大一些，就好啦，亲身踩坑哦~

对于现在一部分2K的笔记本屏幕，win10的显示设置里，通常会推荐你将缩放与布局设置成150%，这个时候获取屏幕像素比，就会是1.5。

当你这样设置的时候，你写的10px，在笔记本上看到的就是15px，如果希望看到设置的是10px，看到的也是10px，可以在设置根字体的时候，加上这样的一段代码：

(function(win) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		// console.log(width)
		if (width > 1200) { // 最大宽度
			width = 1200;
		}
		var rem = width / 12;

		//判断PC端屏幕是否为进行缩放
		var u = navigator.userAgent;
		if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 || u.indexOf('iPhone') > -1 || u
			.indexOf('iPad') > -1 ||
			u.indexOf('iPod') > -1 || u.indexOf('iOS') > -1) {
			//移动端
		} else {
			//屏幕像素比
			var pixelPatio = 1 / window.devicePixelRatio;
			rem = rem * pixelPatio;
		}
		//1rem = 100px
		docEl.style.fontSize = rem + 'px';

	}
	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 10);
	}, false);
	refreshRem();
})(window);

限制一下屏幕的像素比就可以啦~