物理像素： 

顾名思义，就是设备屏幕上的实际像素。也就是说这个手机被出厂造出来的时候，这个屏幕上有多少个像素点，他的物理像素就是多少； 

设备独立像素： 

也叫做逻辑像素(对于前端来说，和我们的css像素是一样的)，这个不同的设备是不一样的。在viewport为ideal-viewport模式时， 如iphone6此时的viewport为375px，代表着我们在css中写375px就可以达到全屏的效果；

在移动端中会使用rem方案，来做不同设备间的适配:

(function () {
function changeRootFont() {
  var designWidth = 750, rem2px = 100;
  document.documentElement.style.fontsize = 
 ((window.innerWidth / designWidth) * rem2px) + 'px';
 //iphone6: (375 / 750) * 100 + 'px';
}
changeRootFont();
window.addEventListener('resize', changeRootFont,false);
})();

这段代码不难懂吧，可以看到，我们通过动态的获取设备独立像素，然后除以设计稿的宽度，然后赋给根字体的fontsize，以致来动态改变跟字体大小，做到自适应。但至于为什么要乘100，首先375 / 750是0.5，浏览器默认最小字体为12px，所以我们需要放大一些，而100又很好算，我们只需要将设计稿量出来的长度（px），小数点向左移2位，单位变成rem就好了。

升级版的, 手机淘宝所用的适配文件：

; (function (designWidth, maxWidth) {
  var doc = document,
    win = window;
  var docEl = doc.documentElement;
  var tid;
  var rootItem, rootStyle;


  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (!maxWidth) {
      maxWidth = 540;
    }
    ;
    if (width > maxWidth) {
      width = maxWidth;
    }
    //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
    var rem = width * 100 / designWidth;
    //兼容UC开始
    rootStyle = "html{font-size:" + rem + 'px !important}';
    rootItem = document.getElementById('rootsize') || document.createElement("style");
    if (!document.getElementById('rootsize')) {
      document.getElementsByTagName("head")[0].appendChild(rootItem);
      rootItem.id = 'rootsize';
    }
    if (rootItem.styleSheet) {
      rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
    } else {
      try {
        rootItem.innerHTML = rootStyle
      } catch (f) {
        rootItem.innerText = rootStyle
      }
    }
    //兼容UC结束
    docEl.style.fontSize = rem + "px";
  };
  refreshRem();


  win.addEventListener("resize", function () {
    clearTimeout(tid); //防止执行两次
    tid = setTimeout(refreshRem, 300);
  }, false);


  win.addEventListener("pageshow", function (e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);


  if (doc.readyState === "complete") {
    doc.body.style.fontSize = "16px";
  } else {
    doc.addEventListener("DOMContentLoaded", function (e) {
      doc.body.style.fontSize = "16px";
    }, false);
  }
})(375, 750);

designWidth 和maxWidth 是我们设计稿的宽度和最大宽度。



真诚赞赏，手留余香

微信支付