CSS参考手册
杂项 | Miscellaneous
Using media queries from code
DOM提供了可以测试一个媒体查询编程的结果的功能,通过MediaQueryList
接口和它的方法和属性。创建MediaQueryList
对象后,可以检查查询的结果,或者在结果更改时收到通知。
创建媒体查询列表
在评估媒体查询的结果之前,您需要创建MediaQueryList
表示查询的对象。为此,请使用该window.matchMedia
方法。
例如,要设置一个查询列表来确定设备是横向还是纵向的:
var mediaQueryList = window.matchMedia("(orientation: portrait)");
检查查询结果
创建媒体查询列表后,可以通过查看其matches
属性的值来检查查询的结果:
if (mediaQueryList.matches) {
/* The viewport is currently in portrait orientation */
} else {
/* The viewport is not currently in portrait orientation, therefore landscape */
}
接收查询通知
如果您需要持续了解对查询的评估结果所做的更改,则注册侦听器比查询查询的结果更有效。为此,请在对象addListener()
上调用方法MediaQueryList
,使用回调函数在媒体查询状态更改(例如,媒体查询测试进行true
到false
)时调用:
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
function handleOrientationChange(mql) { ... } // Define a callback function for the event listener.
mediaQueryList.addListener(handleOrientationChange); // Add the callback function as a listener to the query list.
handleOrientationChange(); // Run the orientation change handler once.
此代码创建方向测试媒体查询列表,然后向其添加事件侦听器。在添加侦听器之后,我们也直接调用侦听器。这使得我们的听众根据当前设备的方向进行调整; 否则,我们的代码可能会认为设备在启动时处于纵向模式,即使它实际上处于横向模式。
该handleOrientationChange()
函数将查看查询的结果,并处理任何我们需要做的方向更改:
function handleOrientationChange(evt) {
if (evt.matches) {
/* The viewport is currently in portrait orientation */
} else {
/* The viewport is currently in landscape orientation */
}
}
上面,我们将参数定义为evt
- 一个事件对象。这是有道理的,因为以标准方式更新的MediaQueryList
句柄事件监听器的实现。他们不再使用不同寻常的MediaQueryListListener
机制,而是使用标准的事件监听器设置,将类型为事件的事件对象MediaQueryListEvent
作为参数传递给回调函数。
这个事件对象还包括media
和match
属性,所以你可以MediaQueryList
通过直接访问它或者访问事件对象来查询这些特性。
结束查询通知
要停止接收有关更改您的媒体查询的值通知,呼吁removeListener()
对MediaQueryList
,它传递先前定义的回调函数的名称:
mediaQueryList.removeListener(handleOrientationChange);
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
9 |
(Yes) |
6.0 (6.0) |
10 |
12.1 |
5 |
New version spec update |
(Yes) |
? |
55 (55) |
No support |
(Yes) |
? |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support |
? |
(Yes) |
? |
? |
? |
? |
? |
New version spec update |
No support |
? |
55.0 (55) |
No support |
(Yes) |
? |
(Yes) |
杂项 | Miscellaneous相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。