一、介绍
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);
限制一下屏幕的像素比就可以啦~