手機端頁面rem寬度自適應腳本

 　　網上關於這方面的文章有很多，重復的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。重點給大家介紹下rem.有需要的小伙伴可以參考下。

　　什麼是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標簽

　　復制代碼 代碼如下:

　　

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

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

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。