響應式佈局 css3 media 媒體查詢 和js+rem
阿新 • • 發佈：2018-12-23
一：媒體查詢
1.使用media的時候需要先設定<meta>標籤來相容移動裝置的展示。
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
width=device-width :寬度等於當前裝置的寬度
user-scalable=no：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）
initial-scale=1：初始的縮放比例（預設設定為1.0）
minimum-scale=1：允許使用者縮放到的最小比例（預設設定為1.0 ）
maximum-scale=1：允許使用者縮放到的最大比例（預設設定為1.0）
2.css3 media
body{
background-color: lightgreen;
}
@media screen and (max-width:960px){
body{
background-color: lightblue;
}
}
一般頁面都會寫media，意思：當頁面小於960px的時候執行它下面的css。
3.媒體查詢缺點
需要根據移動裝置的螢幕大小去寫，一般寬度在（300px-760px）之間。如：min-width max-width在多少之間顯示成什麼樣。
這樣會為了適應各種螢幕，寫很多css樣式程式碼
二：js+rem
通過js 獲取螢幕寬度，重新計算html設定的字型大小，rem是相對html 根元素計算大小的。
<!DOCTYPE html> <html> <head> <base href="<%=basePath%>" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta name="format-detection" content="telephone=no" /> <title>線上服務</title> <link rel="stylesheet" type="text/css" href="/webchat/views/css/guide.css"/> </head> <script type="text/javascript"> !function (a) { function b() { var b = g.getBoundingClientRect().width; b / c > 640 && (b = 640 * c), a.rem = b / 16, g.style.fontSize = a.rem + "px" } var c, d, e, f = a.document, g = f.documentElement, h = f.querySelector('meta[name="viewport"]'), i = f.querySelector('meta[name="flexible"]'); if (h) { console.warn("將根據已有的meta標籤來設定縮放比例"); var j = h.getAttribute("content").match(/initial-scale=(["']?)([d.]+)1?/); j && (d = parseFloat(j[2]), c = parseInt(1 / d)) } else if (i) { var j = i.getAttribute("content").match(/initial-dpr=(["']?)([d.]+)1?/); j && (c = parseFloat(j[2]), d = parseFloat((1 / c).toFixed(2))) } if (!c && !d) { var k = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)), c = a.devicePixelRatio; c = k ? c >= 3 ? 3 : c >= 2 ? 2 : 1 : 1, d = 1 / c } if (g.setAttribute("data-dpr", c), !h)if (h = f.createElement("meta"), h.setAttribute("name", "viewport"), h.setAttribute("content", "initial-scale=" + d + ", maximum-scale=" + d + ", minimum-scale=" + d + ", user-scalable=no"), g.firstElementChild)g.firstElementChild.appendChild(h); else { var l = f.createElement("div"); l.appendChild(h), f.write(l.innerHTML) } a.dpr = c, a.addEventListener("resize", function () { clearTimeout(e), e = setTimeout(b, 300) }, !1), a.addEventListener("pageshow", function (a) { a.persisted && (clearTimeout(e), e = setTimeout(b, 300)) }, !1), "complete" === f.readyState ? f.body.style.fontSize = 12 * c + "px" : f.addEventListener("DOMContentLoaded", function () { f.body.style.fontSize = 12 * c + "px" }, !1), b() }(window); </script> <style> [v-cloak] { display: none; } </style> </head> <body id="guideApp" v-cloak>
</body>
</html>