封装方法在移动端开发中使用rem布局、了解物理像素、逻辑像素、设备像素比

首先应该了解以下几个参数概念：

（1）物理像素/设备像素：指的是设备固定的像素 eg 1080x1920 指的就是设备像素，永远不会改变的
（2）css像素/逻辑像素：指的是开发的像素，CSS 中的像素是一个相对值，不是绝对值，因此1px 的 CSS 像素并不一定等于 1px 的物理像素
（3）设备像素比dpr：物理像素除以css像素
物理设备根据某种规则，决定该采用几个物理像素去显示 1px 的 CSS 像素，这个规则就是设备像素比。

ipone678的像素比都是2，也就是说，所使用的图片，文字，以及所有要进行适配的模块都要进行适配

        function resetRemUnit(){
            var width = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;
            document.documentElement.style.fontSize = (width / 640 * 100 ) + 'px';
        }
        resetRemUnit();
        window.onresize = resetRemUnit;

可以这样去想，同一个大小的区块里面，像素比为2的区块里面有更多的物理像素块去更精确的显示一张图片的颜色块，所以更高清
依此道理，像素比为3就是更加高清
像素比为1的区块就会更加朦胧，不清楚

方法

因为像素比的原因，设计师给与的设计图都是2倍或者3倍，甚至4倍图，
对于我们开发者而言，需要去计算，量出来的数据除以二或者三，非常麻烦！
所以以下解决方法：
实现设计师给我们什么样子的图，就照着量，写出来即可，自动给你实现

1.获取设备像素比
2.利用initial-scale='1/像素比’将设备的inner.width扩大到对应的大小，页面的内容缩小
3.然后监听设备的inner.width，将html的font-size设置为对应的值。
4.因为initial-scale将inner.width扩大了n倍，但是页面的内容也缩小了n倍，所以相互抵消了，‘
所以实现了，给什么样的图，就直接设计就好！

function resetRemUnit(){

  // 获得设备像素比
  var radio = window.devicePixelRatio;
  // 处理设备像素比，只能是1，2，3
  radio = radio >= 3 ? 3 : (radio >= 2 ? 2 : 1);
  // 判断是否有meta标签
  var viewportDOM = document.querySelector('meta[name=viewport]');
  if(!viewportDOM){
    viewportDOM = document.createElement('meta');
    viewportDOM.setAttribute('name', 'viewport');
  }
  // 计算页面缩放比例
  var scale = 1 / radio; 
  var content = 'width=device-width, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no';
  viewportDOM.setAttribute('content', content);
  // 添加meta标签
  document.head.appendChild(viewportDOM);


  // 控制计算rem的最大最小适配页面
  var min = 320 * radio;
  var max = 540 * radio;
  var width = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;
  if(width < min){
    width = min;
  }else if(width > max){
    width = max;
  }
  // 计算rem
  document.documentElement.style.fontSize = (width * 100 / 640) + 'px';
  
}

resetRemUnit();
window.onresize = resetRemUnit;