媒体查询和侦听器

Windows Internet Explorer 9 引入了对使用 CSS、HTML、XML 和 XHTML 进行媒体查询的支持。Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用引入了对媒体查询侦听器的支持。媒体查询让 Web 开发人员能够为一系列精确的设备功能定义一个样式表范围,并且,通过媒体查询侦听器可以使用脚本对运行页面的媒体或环境中的变化作出响应。

媒体查询

媒体查询支持为浏览移动设备(屏幕非常小,调色板受限,低分辨率等)、上网本(屏幕小,调色板完整,高分辨率等)和标准计算机(屏幕大,调色板完整,高分辨率等)的用户分别设计不同的页面。CSS3 媒体查询支持的媒体属性完整列表包括:width、height、device-width, device-height、orientation、aspect-ratio、device-aspect-ratio、color、color-index、monochrome 和 resolution。

下面的声明是一个使用 @media 规则的典型媒体查询。


@media screen and (max-width:400px) {div {border:none;}}

在这种情况下,screen 表示目标媒体类型,而 max-width 则表示目标媒体属性。该声明陈述了只有当页面显示在宽度不超过 400 像素的屏幕上时才应用指定规则(div 元素上无边框)。你可以将多种媒体属性一同使用来创建更具体的查询,如下所示。


@media screen and (max-width:400px) and (max-height:600px) {…}

此声明将在媒体屏幕的宽度不超过 400 像素、高度不超过 600 像素时应用指定规则。

媒体查询侦听器

媒体查询侦听器支持两项新功能,这将在本主题的后面部分加以说明:

  • 使用 JavaScript 在运行时评估媒体查询
  • 从侦听器订阅媒体查询评估中的更改

创建媒体查询侦听器

要在运行时评估媒体查询,需要使用新的窗口方法 (matchMedia) 创建 MediaQueryList 对象。

方法说明

matchMedia(sList)

接受包含一个或多个媒体查询的字符串,并返回一个 MediaQueryList 对象。

 

matchMedia 方法接受媒体查询字符串并返回 MediaQueryList 对象。下面的示例将创建一个媒体查询,以检查窗口的宽度或高度是否小于特定的尺寸。


mql = window.msMatchMedia("(min-width:450px)");

MediaQueryList 对象提供了以下属性。

属性说明

matches

如果媒体查询列表匹配当前窗口的状态则返回 "true";否则返回 "false"。

media

返回媒体查询列表的序列化版本,用它来创建 MediaQueryList 对象。

 

MediaQueryList 对象提供了以下方法。

方法说明

addListener(callback)

将回调函数添加到 MediaQueryList 对象的侦听器列表中。无论何时媒体查询的评估发生更改,都将调用该函数。

removeListener(callback)

将给定的回调函数从 MediaQueryList 对象的侦听器列表中删除。

 

matches 属性是一个返回媒体查询评估的布尔值。在上面的示例中,如果窗口的宽度大于或等于已指定的最小值,则 matches 返回 true


if (mql.matches) 
{
  // Window is fine. 
} else 
{
  // Window is too narrow.       
}

订阅媒体查询侦听器

要检测媒体查询的更改,可以订阅一个针对 MediaQueryList 对象的侦听器。addListener 方法应用一个回调函数,并在媒体查询更改评估时调用它。下面的示例使用前面的媒体查询订阅媒体查询中的更改。


mql.addListener(sizeChange); // Size change is the callback function.function sizeChange(mql) 
{
  if (mql.matches) 
  {
    // The window is big enough for content.
  } 
  else 
  {
    // The window has gotten too small for content.
  }
}

无论何时媒体状态发生更改,侦听器都将调用回调函数。如果窗口大小经调整后,比指定的 minwidth 属性值更窄,则调用回调函数。当窗口宽度大于我们所指定的最小宽度时,则会再次调用它。MediaQueryList 对象作为参数传递给回调函数。

API 参考

Media Queries
Media Query Listeners

示例和教程

设计自适应网站

有关 Internet Explorer 的 Test Drive 演示

CSS3 媒体查询和媒体查询侦听器

IEBlog 文章

使你的站点适应不同的窗口大小
CSS 边角:CSS3 媒体查询

规范

媒体查询
CSSOM 视图模块:第 4.1 节

相关主题

使用 CSS3 媒体查询响应不同设备

 

 

显示:
© 2015 Microsoft