完全搞好rem 與js的監控

什麼是rem

在我看來，rem就是1rem單位就等於html節點fontsize的像素值。因此改變html節點的fontsize是最爲關鍵的一步。根據手機寬度改變相對大小就能夠實現自適應了，就不用什麼媒體查詢那些的。

咱們的設計圖每每寬度是640或者其餘尺寸的，不過我建議是用這個尺寸，以640爲基準，以小到大，實現自適應，下面實現的比例爲1rem=40px(640寬度)。

爲何這樣搞？

這樣一套代碼就搞定手機端尺寸自適應，不須要媒體查詢，並且利用Sass和Less可以給咱們節約更多的時間，以及更好的體驗。

擴展
由於是要計算rem的值，因此咱們前端在看到設計圖量尺寸的時候會去計算下這個東西，須要花費一些時間，因此我提供了Sass（不知道的本身去百度）和Less（不知道的本身去百度）相對變量的代碼，

Sass相對變量地址：Sass相對變量

Less相對變量地址：Less相對變量

打開頁面，1-400的相對變量都在上面，只須要全選複製，而後放入你的項目中，直接拿來用就是了，固然我寫的css雪碧圖生成工具也會用到裏面的變量，你們不妨一試。

手機自適應代碼

下面的代碼是拷貝自淘寶的手機app，固然，我把有的變量還原了，有的註釋了。

viewport標籤

 

複製代碼代碼以下:

<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>

 

js代碼

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

! 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：<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>    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);

執行完代碼後你的頁面就會跟隨手機的寬度而自適應了，根本就不用什麼媒體查詢那些，很簡潔，很使用，站在巨人的肩膀上吧這就叫作！