@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;
  }
}

元素。第二个媒体查询使用 max-width 属性。最大宽度属性表明,如果查看面积小于600 px,将应用接下来的CSS规则。
在台式电脑上测试上面的媒体查询,在浏览器(例如Chrome)中打开web页面,将浏览器窗口最大化,以便查看面积大于1000 px。下图显示了在这种条件下web页面的样子:
图2 宽度大于1000 px 现在,改变浏览器窗口的大小直到小于600 px,则显示内容应该改变为下面的样子:
图 3 宽度小于 600 px 当然,目前我们还没有考虑查看区域在600px - 1000px之间的情况,但是你可以轻易地为这些情况下提供一个默认mycontent类。
在上面的媒体查询中,没有显式地为 "all" 指定媒体类型。
当然你也可以使用媒体类型来实现等价的效果:

@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.
您还可以在媒体查询中指定多个条件。例如,您可以编写以下媒体查询来兼容查看区域 在600 px - 1000 px之间的情况。

@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参数。如果你调整浏览器窗口,当查看区域处于上述范围时你会看到显示效果如下:
图 4 宽度在 600 px - 1000px之间 在上面的例子中使用了可见区域的宽度。如果你想使用屏幕的尺寸来检查,你可以使用max-device-width 和 max-device-height参数。要了解更多媒体查询细节, 请点击这里。
使用媒体查询切换样式表
在前面的例子中,你使用单个样式表来管理不同媒体查询。有时你可能需要对不同的媒体特性使用完全不同的样式表。例如,您可能有一个用于大屏幕尺寸的样式表。其中是针对台式电脑的 字体、字体大小、颜色和整体布局样式。另一方面你可能对移动设备上的web页面定义了完全不同的外观和感觉,如字体、字体大小和布局元素。在这种情况下将各自的风格放在不同的样式表文件中更整洁也更容易维护。
要让浏览器应用哪个样式表,您需要指定一个媒体查询到web页面的元素中。考虑使用以下标记:

上面的标记告诉浏览器,如果媒体查询中指定的媒体属性计算为true则使用StyleSheet2.css。在这种情况下,媒体查询检查请求设备可视面积是否大于1000 px。第二行的标记指定如果可视面积小于600 px,则应用StyleSheet3.css。
从上面的例子可以看到,媒体查询中提到的媒体属性与你早些时候使用的 @media是相同的。 要测试媒体属性,将mycontent CSS类的两个版本放置在两个样式表中(StyleSheet2.css和StyleSheet3.css),然后在主网页添加上面的标记。如果您在浏览器中打开web页面,你应该得到与之前判断浏览器尺寸时相同的结果。
总结
CSS3媒体查询允许您基于媒体类型(media type)和媒体特性(media features)应用CSS规则。这使得根据请求设备应用不同的CSS规则变得容易。诸如设备尺寸,可视区域和屏幕方向等媒体特性,可以使用媒体查询进行测试。总的来说,媒体查询是一个受欢迎的CSS新功能,为移动设备开发网站的web开发人员将会发现这个功能特别有吸引力。
相关阅读
Using CSS3 to Jazz up your Web Forms
Creating a Complete Web Page With HTML5