CSS3媒體查詢 - 更多示例
讓我們來看看使用媒體查詢的一些例子。
我們將與作為電子郵件鏈接名稱的列表開始。 的HTML是：
例1
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
}
ul li a {
color:
green;
text-decoration: none;
padding: 3px;
display: block;
}
</style>
</head>
<body>
<ul>
<li><a data-email="[email protected]"
href="mailto:[email protected]">John Doe</a></li>
<li><a
data-email="[email protected]" href="mailto:[email protected]">Mary
Moe</a></li>
<li><a data-email="[email protected]" href="mailto:[email protected]">Amanda
Panda</a></li>
</ul>
</body>
</html>
試一試» 注意data-email屬性。 在HTML5中，我們可以使用前綴屬性data-存儲信息。 我們將使用data-後屬性。
從520到699px寬 - 應用郵件圖標，每一個環節
當瀏覽器的寬度為520和699px之間，我們將申請郵件圖標，每個電子郵件中的鏈接：
例2
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
試一試» 從700到1000像素寬度 - 前言用文本鏈接
當瀏覽器的寬度是1000像素700之間，我們將與前言文字每個電子郵件鏈接“電子郵件：”：
例3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
試一試» 寬度以上1001PX - 應用電子郵件地址鏈接
當瀏覽器的寬度大於1001PX，我們將追加電子郵件地址的鏈接。
我們將使用值data-屬性的人的名字後添加的電子郵件地址：
例4
@media screen and (min-width: 1001px) {
ul li
a:after {
content: " (" attr(data-email)
")";
font-size: 12px;
font-style: italic;
color:
#666666;
}
}
試一試» 寬度以上1151px - 添加圖標，我們以前使用
對於瀏覽器的寬度以上1151px，我們將再次添加圖標，我們以前使用。
在這裡，我們沒有寫一個額外的媒體查詢塊，我們就可以添加額外的媒體查詢我們已經使用逗號現有的（這會像OR運算符）：
例5
@media screen and (max-width: 699px) and (min-width: 520px), (min-width:
1151px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
試一試» 
更多示例
使用電子郵件聯繫名單上的一個側邊欄的網頁
這個例子使電子郵件中的鏈接列表到網頁的左側邊欄。