JavaScript Media Query List API

MediaQueryList object

MediaQueryList Object na inilalagay ang impormasyon mula sa media query.

MediaQueryList Object naWindow objectAttribute.

MediaQueryList Object na maaccess sa pamamagitan ng:

window.matchMedia() o lamang gamit matchMedia():

Example

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Subukan nang personal

Bilang karagdagan:

window.matchMedia() method

MediaQueryList attribute

Attribute Paglalarawan
matches Boolean value. Kung ang dokumento ay tumutugma sa query, true, kung hindi naman false.
media String value. Media query (list).

MediaQueryList method

Method Paglalarawan
addListener() Magdagdag ng bagong listener function, na gagawin ang function sa bawat pagbabago ng resulta ng pagtitingin ng media query.
removeListener()

Alisin ang naunang idinagdag na listener function mula sa listahan ng media query.

Kung ang tinukoy na listener ay wala sa listahan, hindi gagawin ang anumang operasyon.

Media query

matchMedia() Ang media query method ay maaaring maging CSS @media 规则 Anumang media characteristic, tulad ng min-height, min-width, orientation at iba pa.

Example

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

Subukan nang personal

Media type

Halaga Paglalarawan
all Default. Ginagamit sa lahat ng uri ng device ng media.
print Ginagamit sa printer.
screen Ginagamit sa computer screen, tablet, smartphone at iba pa.
speech Ginagamit ang screen reader na malakas na basahin ang pahina.

Media characteristic

Halaga Paglalarawan
any-hover Mayroon bang anumang magagamit na mekanismo ng pagpasok na nagpapahintulot sa gumamit na itong ihover ang mouse sa elemento?
（Media Queries Level 4 中添加）。
any-pointer Mayroon bang anumang magagamit na mekanismo ng pagpasok, tulad ng pointing device, at kung mayroon, paano ang kanyang katumpakan?
（Media Queries Level 4 中添加）。
aspect-ratio Ang proporsyon ng luwang at taas ng viewport.
color Ang bilang ng bit na may bawat komponent ng kulay ng output device.
color-gamut Ang malapit na saklaw ng kulay na suportado ng user agent at output device
（Media Queries Level 4 中添加）
color-index 设备可以显示的颜色数量。
grid 设备是网格还是位图。
height 视口高度。
hover 主要输入机制是否允许用户将鼠标悬停在元素上？
（Media Queries Level 4 中添加）
inverted-colors 浏览器或底层操作系统是否反转颜色？
（Media Queries Level 4 中添加）。
light-level 当前环境光级别（Media Queries Level 4 中添加）。
max-aspect-ratio 显示区域的最大宽高比。
max-color 输出设备每个颜色分量的最大位数。
max-color-index 设备可以显示的最大颜色数。
max-height 显示区域的最大高度，例如浏览器窗口。
max-monochrome 单色（灰度）设备上每种“颜色”的最大位数。
max-resolution 设备的最大分辨率，使用 dpi 或 dpcm。
max-width 显示区域的最大宽度，例如浏览器窗口。
min-aspect-ratio 显示区域的最小宽高比。
min-color 输出设备每个颜色分量的最小位数。
min-color-index 设备可以显示的最小颜色数。
min-height 显示区域的最小高度，例如浏览器窗口。
min-monochrome 单色（灰度）设备上每种“颜色”的最小位数。
min-resolution 设备的最小分辨率，使用 dpi 或 dpcm。
min-width 显示区域的最小宽度，例如浏览器窗口。
monochrome 单色（灰度）设备上每种“颜色”的位数。
orientation 视口的方向（横向或纵向模式）。
overflow-block 输出设备如何处理沿块轴溢出视口的内容（Media Queries Level 4 中添加）。
overflow-inline 是否可以滚动沿内联轴溢出视口的内容（Media Queries Level 4 中添加）。
pointer 主要输入机制是指点设备吗？如果是，它的准确度如何？
（Media Queries Level 4 中添加）。
resolution 输出设备的分辨率，使用 dpi 或 dpcm。
scan 输出设备的扫描过程。
scripting 是否可以使用脚本（例如 JavaScript）？（Media Queries Level 4 中添加）
update 输出设备可以多快修改内容的外观（Media Queries Level 4 中添加）。
width 视口宽度。