CSS3 多媒体查询实例
本章节我们将为大家演示一些多媒体查询实例。
实例：
<!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>
neue Datei
<!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>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)