首先来讲下我对像素的理解，像素简单理解就是屏幕上的一个个小点嘛，每一个小点有一个颜色，如果使用RGB来描述的话每个点是把每个三原色分成255个阶段，即可以取值1~255。
例如我的屏幕分辨率是19201080，即我的屏幕有19201080个像素点，每个像素点可以显示一个颜色。
如今随着技术的发展，越来越多的高分屏出现了，这就导致一个问题，我的屏幕就那么大，你给我增加了那么多像素点，那么我前端界面的字体就会变小。这是为什么呢？
原因是我们常在CSS中写font-size等于某个值，例如16px，意思是指用16个像素来显示这个字，但因为每个人的分辨率不同，所以会导致高分屏字体偏小而导致模糊，这也就是有些老页面字体偏小的原因？那如何才能解决？
解决这个问题的时候，诞生了一个东西叫DPR （不是DPI），中文叫做像素比，它可以对高分屏导致的问题作出补偿。windows系统有个设置叫系统缩放
它其实改变的就是DPR值，你字体不是因为像素太多，而导致太小吗，那我就多给你点像素来显示它，我的缩放比例是125%，比如一个字需要100个像素进行绘制，而100个像素对于我2k或4K屏来说太小，我就给你100 * 125%个像素进行绘制，因此也就能解决这个问题。
那么接下来说下em和rem，下面是我的一点理解:简单说就是，em是相对父节点来说的，例如父节点是100px，子节点为2em，则子节点为200px；rem是对根节点即html节点来说，所以你首先要设置html的font-size大小（默认为16px）。
最后介绍下我常用的弹性布局。
(function flexible(window, document) {
//自己调用自己的函数，获得window对象和document对象
var docEl = document.documentElement;//获得根节点
var dpr = window.devicePixelRatio || 1;//获得你屏幕的缩放比例 我的为1.25
// adjust body font size
function setBodyFontSize() {
//设置你的body标签内的字体大小，防止因为后面要调整html的font-size而影响body内的字体
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";//为字体为12像素，乘以dpr 就不会因为不同的缩放比例效果不一样
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);//设置监听，加载完成执行
}
}
setBodyFontSize();//执行
// set 1rem = viewWidth / 10
function setRemUnit() {
//设置rem单位
var rem = docEl.clientWidth / 24;//docEl.clientWidth是获取浏览器内容面板的宽度，不包含滚动条，如果出现滚动条，会变小
docEl.style.fontSize = rem + "px";//设置html的font-size大小也就定义了1rem的大小
}
setRemUnit();
// reset rem unit on page resize
window.addEventListener("resize", setRemUnit);//设置窗口大小改变监听，如果改变重新定义1rem大小
window.addEventListener("pageshow", function(e) {
if (e.persisted) {
setRemUnit();
}
});
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
})(window, document);