基于尺寸的媒体功能

时间：2014-6-7

   如今,媒体查询通常用于检测那些用来查看内容的媒介物的尺寸,然后提供适当的规则使内容能在这个媒介物中显示,大文本和大钐于大显示器,小文和单栏布局用手智能手机等这类事情,当然,媒体查询的作用不仅仅是如此,但它的总体思路就是这样.
   我们需要考虑以下两种尺寸,第一,设备本身的尺寸;第二媒体物窗口在这个设备上的尺寸,当然,也可能会有用户使用巨大的宽屏电视来访问我们的网站,但是,就算用户用来查看网站的应用程序只占据屏幕的四分之一,我们也不需要太顾虑这点,在某些设备中,这两种尺寸是相同的-例如,在大多数的智能手机和平板电脑中,浏览器的宽度和设备宽度相同.
   窗口的尺寸最重要也是最常用的,与此相关的媒体功能是height和width.窗口尺寸功能把进行逻辑测试的单一长度值作为一个参数;如果这个尺寸等于提供的长度值,逻辑就是正确的,那么这些规则就会被应用,在下面的查询中,当窗口的宽正好是480px时,在大括号内的规则就会被应用于窗口的body元素中;
   @media screen and (width:480px)
  {
    body{background-color:#00f;}

  }
  此示例使用了一个px值,但也可以使用其他长廊单位,无论使用哪种单位,对于大多数用途而言,准确值都有可能会太具体.然而,这功能有一对扩展,它们使之变得更加灵活.
  包括width在内的许多媒体功能,都允许在功能名称之前添加前缀max-和min-.这两个前缀分别代表最大值和最小值,这可能并不需要解释,在实践中,它们的意思是不超过和不小于.例如,使用max-width,我们可以将样式规则应用于任何宽度不超过480像素的浏览器;而使用min-width,则可以把它应用于任何宽度不小于480px的浏览器:
  @media screen and (max-width:480px){...}
  @media screen and (mix-width:480px){...}
  由于iframe创建一个新的窗口,我们可以使用width媒体功能将规则应用于每个不同大小的窗口.iframe可以参考mq-hell.html,这个网页在标题中包含内联样式块,可以根据相匹配的媒体功能,将不同边框样式属性应用于元素,此任务是通过下列三种媒体执行的:
  @media screen and(width:200px){h1{border-style:solid;}}
  @media screen and(min-width:205){h1{border-style:dotted;}}
  @media screen and(max-width:195px){h1{border-style:dashed;}}