原文链接: Introduction to CSS3 Media Queries
原文日期: 2014年2月21日翻译日期: 2014年2月26日
翻译人员: 铁锚
简介
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<div class="mycontent">
Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
</div>
</body>
</html>上面的页面包含一个<div>元素,并附有mycontent
CSS类。<div>包含了一些测试内容。 mycontent CSS类定义在 StyleSheet1.css中。因此,创建一个新的样式表并命名为StyleSheet1.css。然后添加CSS样式规则:@media (min-width: 1000px) {
.mycontent
{
width:500px;
background-color:#ffd800;
color:#ff0000;
border:2px solid red;
padding:5px;
}
}
@media (max-width: 600px) {
.mycontent {
width:200px;
background-color:#00ff90;
color:navy;
border:2px solid darkblue;
padding:2px;
}
}上面的CSS定义了两个媒体查询。第一个媒体查询检查是否min-width属性至少600像素。min-width属性指明设备上可见区域的最低要求。在上面的例子中,如果这最低可见面积大于1000 px,则指定的 mycontent CSS类规则将应用于<div>元素。第二个媒体查询使用
max-width 属性。最大宽度属性表明,如果查看面积小于600 px,将应用接下来的CSS规则。
@media screen and (min-width: 1000px) {
.mycontent
{
width:500px;
background-color:#ffd800;
color:#ff0000;
border:2px solid red;
padding:5px;
}
}
@media screen and (max-width: 600px) {
.mycontent {
width:200px;
background-color:#00ff90;
color:navy;
border:2px solid darkblue;
padding:2px;
}
}可以看到,上面的查询使用了媒体类型
screen 以及 媒体特性min-width和max-width.@media (min-width: 600px) and (max-width:1000px) {
.mycontent {
width:350px;
background-color:#ff00dc;
color:navy;
border:2px solid #4800ff;
padding:2px;
}
}可以看到上面的媒体查询组合了 min-width和max-width参数。如果你调整浏览器窗口,当查看区域处于上述范围时你会看到显示效果如下:
<link href="StyleSheet2.css" rel="stylesheet" media="screen and (min-width: 1000px)" /> <link href="StyleSheet3.css" rel="stylesheet" media="screen and (max-width: 600px)" />上面的标记告诉浏览器,如果媒体查询中指定的媒体属性计算为true则使用StyleSheet2.css。在这种情况下,媒体查询检查请求设备可视面积是否大于1000 px。第二行的标记指定如果可视面积小于600 px,则应用StyleSheet3.css。
CSS3 Media Queries 简介,布布扣,bubuko.com
原文：http://blog.csdn.net/renfufei/article/details/19981133