本章节我们将为大家演示一些多媒体查询实例。
实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 媒体查询</title>
<style type="text/css">
body { margin: 20px 0; }
.clear{ clear:both}
#container { width: 960px; margin: auto; }
#wrapper { width: 740px; float: left; }
.height { line-height: 168px; text-align: center; font-weight: bold; font-size: 1em; margin: 0 0 20px 0; }
#main { width: 520px; float: right; background: yellow; }
#left { width: 200px; float: left; background: orange; }
#right { width: 200px; float: right; background: green; }
/* 窗口宽度在1000px以上 */
@media screen and (min-width: 1000px) {
/* 3栏显示*/
#container { width: 1000px; }
#wrapper { width: 780px; float: left; }
#main { width: 560px; float: right; }
#left { width: 200px; float: left; }
#right { width: 200px; float: right; }
}
/* 窗口宽度在640px-999px */
@media screen and (min-width: 640px) and (max-width: 999px) {
/* 2栏显示 */
#container { width: 640px; }
#wrapper { width: 640px; float: none; }
.height { line-height: 200px; }
#main { width: 420px; float: right; }
#left { width: 200px; float: left; }
#right { width: 100%; float: none; clear: both; line-height: 100px; }
}
/* 窗口宽度在639px以下 */
@media screen and (max-width: 639px) {
/* １栏显示 */
#container { width: 100%; }
#wrapper { width: 100%; float: none; }
body { margin: 20px; }
.height { line-height: 300px; }
#main { width: 100%; float: none; }
#left { width: 100%; float: none; line-height: 100px; }
#right { width: 100%; float: none; line-height: 100px; }
}
/*CSS3随分辨率改变当前样式显现*/
.wrapper {padding: 5px 100px; margin:8px auto;width:70%; text-align: center; border: solid 1px #999; color: #999; }
.viewing-area{ text-align:center}
.viewing-area span { color: #666; display: none; }
@media screen and (max-width: 600px) {
.one { background: red; border: solid 1px #000; color: #fff; }
span.ppi600 { display: inline-block; }
}
@media screen and (min-width: 900px) {
.two { background: red; border: solid 1px #000; color: #fff; }
span.ppi900 { display: inline-block; }
}
@media screen and (min-width: 600px) and (max-width: 900px) {
.three { background: red; border: solid 1px #000; color: #fff; }
span.ppi600-900 { display: inline-block; }
}
@media screen and (max-device-width: 480px) {
.iphone { background: #ccc; }
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="main" class="height">主栏</div>
<div id="left" class="height">左栏</div>
</div>
<div id="right" class="height">右栏</div>
</div>
<div class="clear"></div>
<p class="viewing-area"><strong>当前视图宽度:</strong><span class="ppi600">小于600px</span><span class="ppi600-900">在600 - 900px之间</span><span class="ppi900">大于900px</span></p>
<div class="wrapper one">窗口宽度小于600像素</div>
<div class="wrapper two">窗口宽度大于900像素</div>
<div class="wrapper three">窗口宽度介于600像素到900像素之间</div>
<div class="wrapper iphone">IE iPhone设备，最大宽度为480像素。</div>
</body>
</html>700 到 1000px - 会添加一个背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background-color:yellow;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "name : ";
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>改变浏览器窗口大小，查看效果!</h1>
<ul>
<li><a href="#">Doe</a></li>
<li><a href="#">Moe</a></li>
<li><a href="#">Panda</a></li>
</ul>
</body>
</html>大于 1151px 宽度 - 添加背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
ul li a {
padding-left: 30px;
background-color:pink;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "name: ";
font-style: italic;
color: #666666;
}
}
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>改变浏览器窗口大小，查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">Doe</a></li>
<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Moe</a></li>
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Panda</a></li>
</ul>
</body>
</html>