rem adaptive layout js code

 1 ;
 2   (function (designWidth, maxWidth) {
 3     var doc = document,
 4       win = window,
 5       docEl = doc.documentElement,
 6       remStyle = document.createElement("style"),
 7       tid;
 8 
 9     function refreshRem() {
10       var width = docEl.getBoundingClientRect().width;
11       maxWidth = maxWidth || 540;
12       width > maxWidth && (width = maxWidth);
13       var rem = width * 100 / designWidth;
14       remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
15     }
16  
. 17      IF (docEl.firstElementChild) {
 18 is        docEl.firstElementChild.appendChild (remStyle);
 . 19      } the else {
 20 is        var wrap = doc.createElement ( "div");
 21 is        wrap.appendChild (remStyle);
 22 is        doc.write (wrap .innerHTML);
 23 is        wrap = null;
 24      }
 25      // wait wiewport after setting to perform refreshRem, otherwise performs refreshRem 2;
 26 is      refreshRem ();
 27  
28      win.addEventListener ( "a resize", function () {
 29        the clearTimeout (TID); // prevents performed twice
 30        TID = the setTimeout (refreshRem, 300);
 31 is     }, false);
32 
33     win.addEventListener("pageshow", function (e) {
34       if (e.persisted) { // 浏览器后退的时候重新计算
35         clearTimeout(tid);
36         tid = setTimeout(refreshRem, 300);
37       }
38     }, false);
39 
40     if (doc.readyState === "complete") {
41       doc.body.style.fontSize = "16px";
42     } else {
43       doc.addEventListener("DOMContentLoaded", function (e) {
44         doc.body.style.fontSize = "16px";
45       }, false);
46     }
47   })(750, 750);

Note: Just insert code in script tags, the size of the final design 750 is changed; size as the corresponding / 100 units of rem

 

 

< script >

;

( function ( designWidth, maxWidth) {

var doc = document,

win = window,

Docela = doc . documentElement ;

remStyle = document. createElement( "style"),

time ;

function refreshRem() {

var width = docEl. getBoundingClientRect(). width;

maxWidth = maxWidth || 540;

width > maxWidth && ( width = maxWidth);

var rem = width * 100 / designWidth;

remStyle. innerHTML = 'html{font-size:' + rem + 'px;}';

}

if ( docEl. firstElementChild) {

docEl. firstElementChild. appendChild( remStyle);

} else {

var wrap = doc. createElement( "div");

wrap. appendChild( remStyle);

doc. write( wrap. innerHTML);

wrap = null;

}

//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；

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

}

})( 750, 750);

< / script >