<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>@media</title>
<style>
* {margin:0; border:0; padding:0;}
/* 当浏览器窗口 <= 400px */
@media screen and (max-width:400px) {
#container {width:300px; height:500px; margin:auto; background:#F00;}
}
/* 当浏览器窗口 >= 401px 并且 <= 800px */
@media screen and (min-width:401px) and (max-width:800px) {
#container {width:700px; height:800px; margin:auto; background:#0F0;}
}
/* 当浏览器窗口 >= 801px */
@media screen and (min-width:801px) {
#container {width:800px; height:1000px; margin:auto; background:#00F;}
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>@media</title>
<style>
* {margin:0; border:0; padding:0;}
/* 当浏览器窗口 <= 400px */
@media screen and (max-width:400px) {
#container {width:300px; height:500px; margin:auto; background:#F00;}
}
/* 当浏览器窗口 >= 401px 并且 <= 800px */
@media screen and (min-width:401px) and (max-width:800px) {
#container {width:700px; height:800px; margin:auto; background:#0F0;}
}
/* 当浏览器窗口 >= 801px */
@media screen and (min-width:801px) {
#container {width:800px; height:1000px; margin:auto; background:#00F;}
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
1087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
