CSS参考手册
媒体查询 | Media Queries
媒体查询:测试媒体查询 | Media Queries: Testing media queries
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 */
}
接收查询通知
如果您需要持续地了解对查询的计算结果的更改,则注册一个听者而不是轮询查询%27的结果。要做到这一点,请调用addListener()
方法的MediaQueryList
对象,并在媒体查询状态更改%28e时调用回调函数。,媒体查询测试将从true
到false
29%:
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) |
媒体查询 | Media Queries相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。