上面的第二和第三个样式表都只能通过支持CSS媒体查询的浏览器下载，因为第二个样式表包含关键字“  only  ”，第三个样式表包含“  and ...  ”。话虽如此，请注意不要将影响页面基本可访问性的一般CSS规则置于 @media  使用媒体查询的规则中，因为不支持媒体查询的浏览器会忽略它们，可能会破坏页面。CSS媒体查询应该像任何其他渐进功能一样实现，并且在与浏览器具有更广泛兼容性的现有基础之上。

 可检测的媒体功能

是时候谈谈CSS媒体查询的“媒体查询”部分，换句话说，我们可以筛选的条件。截至撰写本文时，下面列出了可检测的媒体功能：

@media屏幕和（设备纵横比：16/9）{}@media屏幕和（设备纵横比：1280/720）{}@media屏幕和（设备纵横比：2560/1440）{}

您可以使用逻辑运算符（如“  not  ”，“  and  ”，“  or  ”和“  only  ”）来组合检测中的多个媒体功能。让我们看看现在的一些例子：

/ * ####当观看区域的宽度为765px或更小时应用的CSS #### * / 
@media屏幕和（max-width：765px）{ 
  body { 
    font-size：80％; 
  } 

  div＃leftcolumn { 
    display：none; 
  } 
}

/ * ####当观看区域的宽度介于640px和1600px之间时应用的CSS，所有介质#### * / 
@media（最小宽度：640px）和（最大宽度：1600px）{ 
 / *一些css这里* / 
}

您还可以一次定位多个媒体查询集，方法是用 逗号 分隔每个查询：

/ * ####如果两个媒体查询中的任何一个匹配，则应用CSS #### * / 
@media screen和（min-width：1280px），print和（min-resolution：300dpi）{ 
 / *这里有一些css * / 
}

逗号的行为与“  OR  ”运算符类似。现在我们已经掌握了基本理论，现在是时候看看如何在现实世界中使用CSS媒体查询来部署针对不同设备和屏幕尺寸的多个版本的网页。

 使用CSS媒体查询来定位不同的设备和屏幕尺寸

iPhone，iPad，Android平板电脑，电视，哦，是的，PC。就在几年前，很难想象除了笨重的台式机或笔记本电脑之外的其他任何东西最好在信息高速公路上旅行，但现在，这些设备似乎越来越少。通过CSS媒体查询，您可以快速定位CSS中的不同设备，主要是通过这些设备的窗口/屏幕尺寸。

- 针对“小屏幕”设备

为了解决问题，您可以使用以下内容来定位“小屏幕”设备：

/ * ####目标移动设备，最大设备宽度为480px #### * / 
@media屏幕和（max-device-width：480px）{ 
 / *某些css此处* / 
}

此处包含的CSS规则仅适用于宽度为480px或更小的设备。我在 max-device-width 这里使用而不是  device-width 故意更好地仅针对移动设备（例如，而不是PC）。为什么？因为 device-width ，如果用户调整此显示区域的大小，则指的是设备本身的宽度，而不仅仅是显示区域的宽度（即：浏览器）。除非你的电脑的屏幕分辨率为480px或更低（不太常见！），否则我们上面的媒体查询将无法与之匹配，我们主要只使用移动设备。我也在这里使用值“480px”，因为它似乎捕获了大多数智能手机。iPhone和iPhone4报道了一个 device-width 320个，而Android智能手机可以一直到480px，如三星Galaxy II。具有较大设备宽度的移动设备可能不会落在我们的“小屏幕”下。

- 针对具有高分辨率显示器的Apple移动设备（即：iPhone4 +和iPad3 +）

苹果公司在iPhone 4和iPad3等一些最新设备中引入了“视网膜显示”的概念。基本上这些设备报告 device-width 与其前辈相同（分别为320px和768px），但将两个设备像素塞入每个CSS像素，从而使屏幕分辨率提高一倍。然后，为了定位这些设备，Apple支持一个名为的专有属性 -webkit-device-pixel-ratio ，它返回其设备的像素密度。iPhone 4和iPad3都返回值2：

/ * ####一般用于高分辨率设备的CSS #### * / 
@media screen and（-webkit-min-device-pixel-ratio：1.5）{ 
  / * some css here * / 
} 


/ * ## ## CSS适用于小屏幕高分辨率设备，如iPhone 4 #### * / 
@media屏幕和（-webkit-min-device-pixel-ratio：2）和（max-device-width：480px）{ 
  / *这里有一些css * / 
} 


/ * #### CSS用于大屏幕高分辨率设备，如iPad 3 #### * / 
@media屏幕和（-webkit-min-device-pixel-ratio：2）和（min） -device-width：768px）{ 
  / *这里有一些css * / 
}

上面的代码提出了两点。首先，CSS媒体查询目前不支持嵌套，这意味着您不能将第2和第3个@media规则置于第1个以上，并在后者中取消冗余媒体查询（ screen and (-webkit-min-device-pixel-ratio: 2) ）。其次，CSS媒体规则与其他CSS规则一样，在优先级方面遵循级联顺序，因此相对于其对等体定义的规则越远，优先级越高。

那么什么可以优化“视网膜显示”设备？图像是一种流行的选择，因为它们是利用更高分辨率的完美候选者。这个想法是根据设备提供两个不同版本的图像，“视网膜”设备的一个是原始尺寸和分辨率的两倍。当实际提供这个高分辨率图像时，我们将其尺寸限制为与原始图像相同，允许视网膜设备为原始图像显示的每个像素显示2个像素，从而产生超清晰图像。让我们以背景图片为例：

/ * ####正常背景提供给浏览器#### * / 
div＃featuredbox { 
  width：90％; 
  身高：400px; 
  background：url（original_background.jpg）center center no-repeat; 
} 

/ * #### CSS用于具有较大屏幕的视网膜设备#### * / 
@media屏幕和（-webkit-min-device-pixel-ratio：2）和（min-device-width：768px）{ 
  div #featuredbox { 
    -webkit-background-size：50％auto; / *将图像缩小到其实际尺寸的50％，与上面原始图像的尺寸相匹配* / 
    background：url（highres_background.jpg）中心不重复; / *高分辨率图像这是双重的大小/原始的*的分辨率/ 
  } 
}

- 以“横向”和“纵向”模式定位设备

好像处理不同的屏幕尺寸是不够的，我们有时也必须与设备的方向竞争。如果这是您唯一要筛选的内容，那么CSS媒体查询就足够简单了：

@media屏幕和（方向：肖像）{ 
  / *这里的一些CSS * / 
}

这将针对浏览器高度超过其宽度的所有设备，包括桌面计算机上的设备。在移动浏览器上，只要用户将屏幕旋转到“纵向”模式，就是如此。在现实生活中，您可能希望进一步优化您的测试，例如用户是否也使用小屏幕设备，其中方向更重要：

/ * #### CSS一般适用于小屏幕设备（无论是纵向还是横向模式）#### * / 
@media屏幕和（max-device-width：480px）{ 
  / *这里的一些CSS * / 
} 

/ * #### CSS仅适用于纵向模式的小屏幕设备#### * / 
@media screen和（max-device-width：480px）和（orientation：portrait）{ 
  / *这里的一些CSS * / 
}

此时你可能已经注意到我们在CSS媒体查询中使用“  width ”和“  device-width ” 之间切换，似乎是任意的。在某种程度上它是，但不完全。让我们来看看下面 width “和” 之间的细微区别 device-width 。