CSS3之Media Queries媒体查询

在CSS中，与媒体相关的样式定义是从CSS2.1开始的。CSS2.1中定义了各种媒体类型，包括显示器、便携设备、电视机，等等。
      CSS3中加入了Media Queries模块，该模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式。换句话说，允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。
      我们知道，在不同的设备中，浏览器的窗口尺寸可能是不同的，如果只针对某窗口尺寸来制作网页，在其他设备中呈现该网页时就会产生很多问题，如果针对不同的窗口尺寸制作不同的网页，则要制作的网页就会太多。
      为了解决这个问题，CSS3中单独增加了Media Queries模块，使用这个模拟，网页制作者只需要针对不同的浏览器窗口尺寸编写不同的样式，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。
      到目前为止，Media Queries模块得到了Firefox，Safari，Chrome及Opera浏览器的支持。
      Media Queries的使用方法：@media 设备类型 and(设备特性)｛样式代码｝
      在代码的开头必须要书写"@media"，然后指定设备类型，也可以称之为媒体类型。CSS2.1中定义了10种设备类型，在此处可以指定的值与该值所代表的设备类型如下：

       设备特性的书写方式与样式的书写方式相似，分为两个部分，当中由冒号分割，冒号前书写设备的某种特性，冒号后书写该特性的具体值。例如，如果需要指定浏览器的窗口宽度大于400px时所使用的样式，书写方法如下所示：(min-width:400px)
      CSS中的设备特性共有13种，是一个类似于CSS属性的集合。但与CSS属性不同的是，大部分设备特性的指定值接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用<和>这些字符。
      对于这13种设备特性的说明如下表：

      使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，譬如以下语句指定了当窗口宽度小于640px时所使用的样式：
      @media screen and (max-width:639px){样式代码}
      可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中，指定方式类型如下所示：
      @media handled and (min-width:360px),screen and (min-width:480px){样式代码}
      可以在表达式中加上not关键字或only关键字，not关键字表示对后面的表达式执行取反操作，书写方法如下所示：
      /*对not后面的语句执行取反操作，样式代码将被使用在便携设备之外的其他设备或非彩色便携设备中 */
      @media not handled and (color) {样式代码}
      //样式代码将被使用在所有非彩色设备中
      @media all and (not color)
      only关键字的作用是，让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式中的样式隐藏起来。例如，对于如下的语句来说：
      @media only screen and (color){样式代码}
      对于支持Media Queries的设备来说，将能够正确的应用样式，就仿佛only不存在一样。对于不支持Media Queries便能够读取Media Type的设备（譬如IE8只支持"@media screen"）来说，由于先读取到的是only而不是screen，将忽略这个样式。
      对于不支持Media Queries的浏览来说，无论是否有only，都将忽略这个样式。
      CSS3中的Media Queries模块中也支持对外部样式表的引用，使用方法类似如下表示：
      @import url(color.css) screen and (min-width:1000px)
      <link rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" href="style/css" />

转载自http://www.yiiyaa.net/

CSS3之Media Queries媒体查询,古老的榕树,5-wow.com