舒彬琪博客-前端技术博客

移动端使用 rem 布局 js代码

REM 是相对单位，是相对于 HTML根元素 。

这个单位可谓集 相对大小 和 绝对大小 的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。

rem.js 适配计算代码

window.onload = function(){

  /*750代表设计稿的宽度，设计稿是多少，就写多少;100代表换算比例*/

  getRem(750,100)

};

window.onresize = function(){

  getRem(750,100)

};

function getRem(pwidth,prem){

  var html = document.getElementsByTagName("html")0;

  var oWidth = document.body.clientWidth || document.documentElement.clientWidth;

  html.style.fontSize = oWidth/pwidth*prem + "px";

}

rem.js 适配计算代码

// 移动端rem适配所有手机

(function(doc, win) {

  var docEl = doc.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function() {

      var clientWidth = docEl.clientWidth;

      if (!clientWidth) return;

      if (clientWidth >= 750) {

        docEl.style.fontSize = '100px';

      } else {

        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

      }

    };

  if (!doc.addEventListener) return;

  win.addEventListener(resizeEvt, recalc, false);

  doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

CSS解决 rem.js 响应 闪烁 问题代码

由于字体大小都是基于html的，所以在移动端做适配的时候，可以使用这样的方法，提前设置好预设设配，避免js未及时响应

@media (min-width: 320px){html{font-size: 42.6667px;} }

@media (min-width: 360px){html{font-size: 48px;} }

@media (min-width: 375px){html{font-size: 50px;} }

@media (min-width: 384px){html{font-size: 51.2px;} }

@media (min-width: 414px){html{font-size: 55.2px;} }

@media (min-width: 448px){html{font-size: 59.7333px;} }

@media (min-width: 480px){html{font-size: 48px;} }

@media (min-width: 512px){html{font-size: 68.2667px;} }

@media (min-width: 544px){html{font-size: 72.5333px;} }

@media (min-width: 576px){html{font-size: 76.8px;} }

@media (min-width: 608px){html{font-size: 81.0667px;} }

@media (min-width: 640px){html{font-size: 85.3333px;}