響應式布局想法和實現
阿新 • • 發佈:2018-09-06
收藏 後退 append pre complete 一個 reat time rec
看過這篇文章,寫的挺全面, 從幾個方面分析響應式寫法優劣,先收藏:
http://caibaojian.com/web-app-rem.html
最終方案:
//designWidth:設計稿的實際寬度值,需要根據實際設置 //maxWidth:制作稿的最大寬度值,需要根據實際設置 //這段js的最後面有兩個參數記得要設置,一個為設計稿實際寬度,一個為制作稿最大寬度,例如設計稿為750,最大寬度為750,則為(750,750) (function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle= document.createElement("style"), tid; 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);
響應式布局想法和實現