css3 属性@media 自适应屏幕宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="#" />
<title>测试</title>
<style type="text/css">
/* 1536px <= width <= 1920px */
@media ( min-width :1536px) and (max-width: 1920px) {
h1 {
background-color: green;
}
}
/* 1920px <= width */
@media ( min-width : 1920px) {
h1 {
background-color: red;
}
}
</style>
</head>
<body>
<h1></h1>
<h2></h2>
<script type="text/javascript">
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementsByTagName('h1')[0].innerHTML = "窗口的宽高：" + w + "*" + h;
console.log("窗口的宽高：" + w + "*" + h);
var width = window.screen.width;
var height = window.screen.height;
document.getElementsByTagName('h2')[0].innerHTML = "屏幕分辨率：" + width + "*" + height;
console.log("屏幕分辨率：" + width + "*" + height);
</script>
</body>
</html>
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
