一:媒体查询
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>