看過這篇文章，寫的挺全面， 從幾個方面分析響應式寫法優劣，先收藏：

http://caibaojian.com/web-app-rem.html

最終方案：

rem是通過根元素進行適配的，網頁中的根元素指的是html，我們通過設置html的字體大小就可以控制rem的大小。

下面函數將屏幕寬度和根元素字體大小聯系起來，而頁面內元素寬度都是通過rem來設置，如750頁面最大寬度也就是7.5rem，字體16px =>0.16rem。

頁面大小變化時，根元素html大小相應變化，內部元素隨rem變化相應改變，來達到響應效果。

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

?擴展閱讀：https://www.cnblogs.com/tiger95/p/7941341.html （3個方案：1.rem 625%? 2.網易? 3.淘寶）

轉載于:https://www.cnblogs.com/lola/p/9597272.html

總結

以上是生活随笔為你收集整理的响应式布局想法和实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。