rem 单位手机页面适配


物理像素: 

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


设备独立像素: 

也叫做逻辑像素(对于前端来说,和我们的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 是我们设计稿的宽度和最大宽度。


真诚赞赏,手留余香
赞赏
随机推荐
npm warn package.json @1.0.0 no repository field
Node.js i18n 国际化实现语言切换
Nginx PHP 使用 open_basedir 限制站点目录防止跨站
CSS中比一像素还要细的边框
Angular 2.0 五分钟教程
windows10删除OneDrive
MySQL tag设计中,where in参数为带逗号的字符串查询
使用mint-ui开发项目的一些所得
git 取消文件跟踪
windows中Git的换行符为 CRLF