看過這篇文章，寫的挺全面， 從幾個(gè)方面分析響應(yīng)式寫法優(yōu)劣，先收藏：

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

最終方案：

rem是通過根元素進(jìn)行適配的，網(wǎng)頁中的根元素指的是html，我們通過設(shè)置html的字體大小就可以控制rem的大小。

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

頁面大小變化時(shí)，根元素html大小相應(yīng)變化，內(nèi)部元素隨rem變化相應(yīng)改變，來達(dá)到響應(yīng)效果。

//designWidth:設(shè)計(jì)稿的實(shí)際寬度值，需要根據(jù)實(shí)際設(shè)置 //maxWidth:制作稿的最大寬度值，需要根據(jù)實(shí)際設(shè)置 //這段js的最后面有兩個(gè)參數(shù)記得要設(shè)置，一個(gè)為設(shè)計(jì)稿實(shí)際寬度，一個(gè)為制作稿最大寬度，例如設(shè)計(jì)稿為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 設(shè)置好后才能執(zhí)行 refreshRem，不然 refreshRem 會(huì)執(zhí)行2次； refreshRem();win.addEventListener("resize", function() {clearTimeout(tid); //防止執(zhí)行兩次tid = setTimeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function(e) {if (e.persisted) { // 瀏覽器后退的時(shí)候重新計(jì)算 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);

?擴(kuò)展閱讀：https://www.cnblogs.com/tiger95/p/7941341.html （3個(gè)方案：1.rem 625%? 2.網(wǎng)易? 3.淘寶）

轉(zhuǎn)載于:https://www.cnblogs.com/lola/p/9597272.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。