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;
}
}
试一试» 
更多示例
使用电子邮件联系名单上的一个侧边栏的网页
这个例子使电子邮件中的链接列表到网页的左侧边栏。