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 是我们设计稿的宽度和最大宽度。


真诚赞赏,手留余香
赞赏
随机推荐
FTP over TLS加密传输 Filezilla
Apache只在vhost文件设置虚拟主机的rewrite
JS触摸拖动div的移动,类似拖动电子地图
ThinkPHP中,跳转方法在try..catch中使用注意
Authorization Schemes 认证模式
十大编程算法
Node.js 断言模块 Assert 模块
如何在 vue 项目里正确地引用 jquery 插件
ul li格式的分页样式
jquery原生幻灯
QQ号

微信联系我

夜间模式切换
回到顶部