HTML5中的媒体查询

时间：2014-6-6

   在我看来,在网站设计领域,媒体查询一直是多年最大的促变因素-大概是因为CSS本身已成为主流,CSS的广泛采用允许我们抛弃那些刚性限制的基于表单的网站;然而,媒体查询又使我们再前进一步,用它设计出的网页能支持各种用以显示网站的设备规格.
   媒体查询是逻辑语句,如果逻辑是正确的,在语句中的样式规则就会被应用,如果逻辑是错误的,规则就会跳过,语句的参数被称为媒体功能,如今最常用的参数与设备或窗口的尺寸相关,在详细讨论媒体功能之前,让我们来看看如何使用它们.
   媒体查询扩展了CSS2.1和HTML5.01使用媒体类型语法-请记住,就是这种语法,允许调用依赖于媒体的样式,例如,当链接到外部样式表单时:
  <link rel="stylesheet" href="foo.css" media="screen">
  只有当查看设备是屏幕时,此代码才调用外部样式表foo.css-换句话说,如果是其他的媒体类型,例如,打印,那就不行,要想扩展此语法,我们只需添加and这个词,再把query放在括号中加在后面:
  <link rel="stylesheet" href="foo.css" media="screen and (query)">
  这个被修改后的代码要同时满足两个条件,第一,媒体类型应该是一个屏幕;第二,媒体查询的逻辑应该是正确的,如果这两个条件都满足,则可以应该foo.css
  通过@import at-rule,我们还可以运用媒体查询,把其他样式表单中的外部样式表包括在内,下面这个代码和上面的代码逻辑相同,但它可以用于样式标记或外部样式表单中:
  @import url("foo.css") screen and (query);