rem layout js implementation

(function(designWidth, maxWidth) {

 var doc = document,

  win = window;

 var docEl = doc.documentElement;

 was time;

 var rootItem,rootStyle;

 

 function refreshRem() {

  var width = docEl.getBoundingClientRect().width;

  if (!maxWidth) {

   maxWidth = 540;

  };

  if (width > maxWidth) {

   width = maxWidth;

  }

  //Different from Taobao's practice, directly use the simple rem conversion method 1rem=100px

  var rem = width * 100 / designWidth;

  //Compatible with UC start

  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}

  }

  //Compatible with UC end

  docEl.style.fontSize = rem + "px";

 };

 refreshRem();

win.addEventListener("resize", function() {

  clearTimeout(tid); //Prevent execution twice

  tid = setTimeout(refreshRem, 300);

 }, false);

 

 win.addEventListener("pageshow", function(e) {

  if (e.persisted) { // recalculate when the browser goes back

   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);

 }

})(750, 640);