对像素和前端px、em、rem单位的理解以及常用弹性布局展示

首先来讲下我对像素的理解，像素简单理解就是屏幕上的一个个小点嘛，每一个小点有一个颜色，如果使用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);