萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 手機端頁面rem寬度自適應腳本

手機端頁面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);

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

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

copyright © 萬盛學電腦網 all rights reserved