移动端rem布局和百分比栅格化布局

 1(function (win){
 7   var doc = win.document,
 8       html = doc.documentElement,
 9       option = html.getAttribute(‘data-use-rem‘);
10  
11   if( option === null ){
12     return;
13   }
14   
15   // defaut baseWidth : 640px；
16   var baseWidth = parseInt(option).toString() === ‘NaN‘ ? 640 : parseInt(option);
17   var grids = baseWidth / 100;
18   var clientWidth = html.clientWidth || 320;
19 
20   // set rem first
21   html.style.fontSize = clientWidth / grids + ‘px‘;
22   
23   // create testDom
24   var testDom = document.createElement(‘div‘);
25   var testDomWidth = 0;
26   var adjustRatio = 0;
27   testDom.style.cssText = ‘height:0;width:1rem;‘;
28   doc.body.appendChild(testDom);
29 
30   var calcTestDom = function(){
31     testDomWidth = testDom.offsetWidth;
32     if( testDomWidth !== Math.round(clientWidth / grids) ){
33       adjustRatio = clientWidth/grids/testDomWidth;
34       var reCalcRem = clientWidth*adjustRatio / grids;
35       html.style.fontSize = reCalcRem + ‘px‘;
36     } else{
37       doc.body.removeChild(testDom);
38     }
39   };
40 
41   // detect if rem calc is working directly
42   // if not , recalc and set the rem value
43   setTimeout(calcTestDom, 20);
44 
45   var reCalc = function(){
46     var newCW = html.clientWidth;
47     if ( newCW === clientWidth ){
48       return;
49     }
50     clientWidth = newCW;
51     html.style.fontSize = newCW*(adjustRatio?adjustRatio:1) / grids + ‘px‘;
52     // if( testDom ) setTimeout(calcTestDom, 20);
53   };
54 
55   // Abort if browser does not support addEventListener
56   if (!doc.addEventListener){
57     return;
58   }
59 
60   var resizeEvt = ‘orientationchange‘ in win ? ‘orientationchange‘ : ‘resize‘;
61 
62   win.addEventListener(resizeEvt, reCalc, false);
63   // detect clientWidth is changed ?
64   doc.addEventListener(‘DOMContentLoaded‘, reCalc, false);
65   
66 })(window);