随着各种新手机的发布，分辨率也碎片化了，我们无法预知将来会出现的分辨率宽度，我们不可能把所有要兼容的分辨率写到css里。
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
移动端开发用rem布局时的js控制代码
30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)
手机端页面rem宽度自适应脚本

(function (doc, win) {
          var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
          };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);

(function(doc, win) {
    var docEle = doc.documentElement,//获取html元素
        event = "onorientationchange" in window ? "orientationchange" : "resize",//判断是屏幕旋转还是resize;
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 100 * (width / 320) + "px");//设置html的fontSize，随着event的改变而改变。
        };
     
    win.addEventListener(event, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

!function(win) {
 function resize() {
  var domWidth = domEle.getBoundingClientRect().width;
  if(domWidth / v > 540){
   domWidth = 540 * v;
  }
  win.rem = domWidth / 16;
  domEle.style.fontSize = win.rem + "px";
 }
 var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]');
 if (viewport) {
  //viewport：
  var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
  if(o){
   initial_scale = parseFloat(o[2]);
   v = parseInt(1 / initial_scale);
  }
 } else {
  if (flexible) {
   var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
   if(o){
    v = parseFloat(o[2]);
    initial_scale = parseFloat((1 / v).toFixed(2))
   }
  }
 }
 if (!v && !initial_scale) {
  var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
  v = win.devicePixelRatio;
  v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
 }
 //没有viewport标签的情况下
 if (domEle.setAttribute("data-dpr", v), !viewport) {
  if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) {
   domEle.firstElementChild.appendChild(viewport)
  } else {
   var m = dom.createElement("div");
   m.appendChild(viewport), dom.write(m.innerHTML)
  }
 }
 win.dpr = v;
 win.addEventListener("resize", function() {
  clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
 }, false);
 win.addEventListener("pageshow", function(b) {
  b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
 }, false);
 /* 个人觉得没必要完成后就把body的字体设置为12
 "complete" === dom.readyState ? dom.body.style.fontSize = 12 * v + "px" : dom.addEventListener("DOMContentLoaded", function() {
  //dom.body.style.fontSize = 12 * v + "px"
 }, false);
 */
 resize();
}(window);

var desW = 640;
var winW = document.documentElement.clientWidth;
document.documentElement.style.fontSize = winW/desW*100+"px";

转载请注明：有爱前端 » 移动端开发用rem布局时的js控制代码