css media 适配屏幕宽度
2018-08-21 本文已影响1125人
日不落000
H5 屏幕适配
css media 适配屏幕宽度；
js 通过
s += " 网页可见区域宽："+ document.body.clientWidth+"<br />"; //变
s += " 网页可见区域高："+ document.body.clientHeight+"<br />"; //变
s += " 屏幕分辨率的高："+ window.screen.height+"<br />"; //不变
s += " 屏幕分辨率的宽："+ window.screen.width+"<br />"; //不变
适配获取屏幕宽度，来执行对应方法；
max-width在窗口大小改变或横竖屏转换时会发生变化；max-device-width只与设备相关，在窗口大小改变或横竖屏转换时都不会发生变化。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<style>
.component {
width: 200px;
background: #ff0000;
font-size: 30px;
}
{/**iphone5*/}
@media (min-width: 320px) {
.component {
width: 300px;
background: #00ffff;
font-size: 23px;
}
}
{/**iphone6*/}
@media (min-width: 375px) {
.component {
width: 360px;
background: #0000ff;
font-size: 26px;
}
}
{/**iphone6*/}
@media (min-width: 375px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
background: #6666ff;
}
}
{/**pc*/}
@media (max-width: 480px) {
.component {
background: #00ff00;
}
}
{/**pc*/}
@media (max-width: 767px) {
.component {
background: #00ff00;
}
}
{/**pc*/}
@media (min-width: 768px) and (max-width: 979px) {
.component {
width: 600px;
background: #00ff00;
font-size: 30px;
}
}
{/**pc*/}
@media (max-width: 979px) {
.component {
background: #00fff0;
}
}
{/**pc*/}
@media (min-width: 980px) {
.component {
width: 900px;
background: #00ff00;
font-size: 35px;
}
}
{/**pc*/}
@media (min-width: 1200px) {
.component {
width: 1000px;
background: #00ff00;
}
}
</style>
</head>
<body>
<div class="component" id="div_html">aaaa</div>
</body>
<script type="text/javascript">
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth+"<br />";
s += " 网页可见区域高："+ document.body.clientHeight+"<br />";
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"<br />";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"+"<br />";
s += " 网页正文全文宽："+ document.body.scrollWidth+"<br />";
s += " 网页正文全文高："+ document.body.scrollHeight+"<br />";
s += " 网页被卷去的高(ff)："+ document.body.scrollTop+"<br />";
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop+"<br />";
s += " 网页被卷去的左："+ document.body.scrollLeft+"<br />";
s += " 网页正文部分上："+ window.screenTop+"<br />";
s += " 网页正文部分左："+ window.screenLeft+"<br />";
s += " 屏幕分辨率的高："+ window.screen.height+"<br />";
s += " 屏幕分辨率的宽："+ window.screen.width+"<br />";
s += " 屏幕可用工作区高度："+ window.screen.availHeight+"<br />";
s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"<br />";
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"<br />";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"<br />";
document.getElementById("div_html").innerHTML = s;
</script>
</html>
运行结果如下：
i_5.png
i_6.png
pc_928.png
pc_634.png
参考：
media query（媒介查询）https://blog.csdn.net/zhouziyu2011/article/details/61917081
