MediaQueryList API

MediaQueryList 对象

这个MediaQueryList 对象存储来自媒体查询的信息。

这个MediaQueryList 对象是的属性窗口对象。

这个MediaQueryList 对象通过以下方式访问：

window.matchMedia()要不就matchMedia():

示例

const mqlObj = window.matchMedia();

亲自试一试 »

const mqlObj = matchMedia();

亲自试一试 »

也可以看看：

window.matchMedia() 方法

MediaQueryList 属性

Property	Description
matches	A boolean. `true` if the document matches the query, otherwise `false`.
media	A string. A media query (list).

MediaQueryList 方法

Method	Description
addListener()	Adds a new listener function, which is executed whenever the media query's evaluated result changes
removeListener()	Removes a previously added listener function from the media query list. Does nothing if the specified listener is not already in the list

媒体查询

媒体询问matchMedia()方法可以是任何媒体特征CSS @media 规则，如最小高度、最小宽度、方向等。

示例

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

媒体类型

Value	Description
all	Default. Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that "reads" the page out loud

媒体特色

Value	Description
any-hover	Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
aspect-ratio	The ratio between the width and the height of the viewport
color	The number of bits per color component for the output device
color-gamut	The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4)
color-index	The number of colors the device can display
grid	Whether the device is a grid or bitmap
height	The viewport height
hover	Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
inverted-colors	Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
light-level	Current ambient light level (added in Media Queries Level 4)
max-aspect-ratio	The maximum ratio between the width and the height of the display area
max-color	The maximum number of bits per color component for the output device
max-color-index	The maximum number of colors the device can display
max-height	The maximum height of the display area, such as a browser window
max-monochrome	The maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution	The maximum resolution of the device, using dpi or dpcm
max-width	The maximum width of the display area, such as a browser window
min-aspect-ratio	The minimum ratio between the width and the height of the display area
min-color	The minimum number of bits per color component for the output device
min-color-index	The minimum number of colors the device can display
min-height	The minimum height of the display area, such as a browser window
min-monochrome	The minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution	The minimum resolution of the device, using dpi or dpcm
min-width	The minimum width of the display area, such as a browser window
monochrome	The number of bits per "color" on a monochrome (greyscale) device
orientation	The orientation of the viewport (landscape or portrait mode)
overflow-block	How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
resolution	The resolution of the output device, using dpi or dpcm
scan	The scanning process of the output device
scripting	Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
update	How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
width	The viewport width