Dalam bab ini kami akan menunjukkan beberapa contoh pertanyaan multimedia untuk anda.
Contoh:
<!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) { /* 1栏显示 */ #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 hingga 1000px - akan menambah latar belakang Warna
<!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>
Lebih daripada 1151px Lebar - Tambahkan latar belakang
<!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>