您的位置:首页 > Web前端 > CSS

响应式布局 css3 media 媒体查询 和js+rem

2016-10-31 14:43 691 查看
一:媒体查询

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 :宽度等于当前设备的宽度

[b]user-scalable=no:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
[/b]

[b]initial-scale=1:初始的缩放比例(默认设置为1.0)
[/b]

[b]minimum-scale=1:允许用户缩放到的最小比例([b]默认设置为1.0)[/b]
[/b]

maximum-scale=1:[b]允许用户缩放到的最大比例(默认设置为1.0[/b]

 
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"
}

[b]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>




内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: