JavaScript MediaQueryList API

MediaQueryList ਆਬਜੈਕਟ

MediaQueryList ਆਬਜੈਕਟ ਮੀਡੀਆ ਕੁਝ ਤੋਂ ਸੂਚਨਾ ਸਟੋਰ ਕਰਦਾ ਹੈ

MediaQueryList ਆਬਜੈਕਟ ਹੈਵਿੰਡੋ ਆਬਜੈਕਟਦੇ ਪ੍ਰਤੀਭਾ

MediaQueryList ਅਬਜੈਕਟ ਨੂੰ ਨਿਮਨ ਤਰੀਕੇ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

window.matchMedia() ਜਾਂ ਸਿਰਫ matchMedia()

ਇੱਕ ਮਿਸ਼ਨ

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

ਸੁਤੰਤਰ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਇਹ ਦੇਖੋ:

window.matchMedia() ਤਰੀਕਾ

MediaQueryList ਪ੍ਰਤੀਭਾ

ਪ੍ਰਤੀਭਾ ਵਰਣਨ
matches ਬੁਲੀਨ ਮੁੱਲ। ਜੇਕਰ ਦਸਤਾਵੇਜ਼ ਕੁਝ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ ਤਾਂ trueਅਤੇ ਹੋਰ false
media ਸਟਰਿੰਗ ਮੁੱਲ। ਮੀਡੀਆ ਕੁਝ (ਸੂਚੀ)

MediaQueryList ਤਰੀਕਾ

ਤਰੀਕਾ ਵਰਣਨ
addListener() ਨਵੀਂ ਇਨਪੁਟ ਫੰਕਸ਼ਨ ਜੋੜੋ, ਜਦੋਂ ਮੀਡੀਆ ਕੁਝ ਦੇ ਮੁੱਲ ਬਦਲ ਜਾਵੇ ਤਾਂ ਇਹ ਫੰਕਸ਼ਨ ਚਲਾਓ
removeListener()

ਪਹਿਲਾਂ ਜੋੜੇ ਗਏ ਲਿਸਟ ਵਿੱਚ ਹੋਏ ਇਨਪੁਟ ਫੰਕਸ਼ਨ ਨੂੰ ਹਟਾਓ

ਜੇਕਰ ਸਪੱਸ਼ਟ ਕੀਤਾ ਗਿਆ ਹੋਰ ਲਿਸਟ ਵਿੱਚ ਨਾ ਹੋਵੇ ਤਾਂ ਕੋਈ ਕਾਰਵਾਈ ਨਹੀਂ ਕਰੇ

ਮੀਡੀਆ ਕੁਝ

matchMedia() ਮੀਡੀਆ ਕੁਝ ਹੋ ਸਕਦੀ ਹੈ CSS @media ਰੂਲ ਕਿਸੇ ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਕੋਲ ਹੋਵੇ, ਜਿਵੇਂ ਮਿਨ-ਹੈਚ, ਮਿਨ-ਵਿਦਥ, ਓਰੀਐਂਟੇਸ਼ਨ ਆਦਿ

ਇੱਕ ਮਿਸ਼ਨ

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

ਸੁਤੰਤਰ ਤੌਰ 'ਤੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਮੀਡੀਆ ਟਾਈਪ

ਮੁੱਲ ਵਰਣਨ
all ਮੂਲਤਬੀ। ਸਾਰੇ ਮੀਡੀਆ ਟਾਈਪ ਯੰਤਰਾਂ ਵਾਸਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ
print ਪ੍ਰਿੰਟਰ ਵਾਸਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ
screen ਕੰਪਿਊਟਰ ਸਕਰੀਨ, ਟੈਬਲੇਟ, ਸਮਾਰਟਫੋਨ ਆਦਿ ਵਰਤੇ ਜਾਂਦਾ ਹੈ
speech ਪੰਨੇ ਨੂੰ ਪੜ੍ਹਨ ਲਈ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਸਕਰੀਨ ਰੀਡਰ

ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾ

ਮੁੱਲ ਵਰਣਨ
any-hover ਕੀ ਕੋਈ ਉਪਲੱਬਧ ਇਨਪੁਟ ਮੈਕਨਿਜ਼ਮ ਹੈ ਜੋ ਯੂਜ਼ਰ ਨੂੰ ਮਾਉਸ ਨੂੰ ਏਜੰਟ ਉੱਤੇ ਸਟੋਪ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ?
（ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ）。
any-pointer ਕੀ ਕੋਈ ਉਪਲੱਬਧ ਇਨਪੁਟ ਮੈਕਨਿਜ਼ਮ ਹੈ ਜਿਵੇਂ ਇੱਕ ਇੰਡੋਕਟ ਯੰਤਰ ਹੈ ਅਤੇ ਜੇਕਰ ਹੈ ਤਾਂ ਉਸ ਦੀ ਨਿਖੇਧਤਾ ਕਿਵੇਂ ਹੈ?
（ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ）。
aspect-ratio ਵਿਜ਼ਨ ਦੇ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਦਾ ਅਨੁਪਾਤ
color ਆਉਟਪੁੱਟ ਯੰਤਰ ਦੇ ਹਰ ਰੰਗ ਦੇ ਕੰਪੋਨੈਂਟ ਦੇ ਬਿਟਸ ਦਾ ਅਕਸ਼ਰ
color-gamut ਉਪਭੋਗਤਾ ਅਤੇ ਆਉਟਪੁੱਟ ਯੰਤਰ ਦਾ ਲਗਭਗ ਰੰਗ ਦਾ ਦਾਇਰਾ
（Media Queries Level 4 中添加）
color-index 设备可以显示的颜色数量。
grid 设备是网格还是位图。
height 视口高度。
hover 主要输入机制是否允许用户将鼠标悬停在元素上？
（Media Queries Level 4 中添加）
inverted-colors 浏览器或底层操作系统是否反转颜色？
（ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 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 ਮੁੱਖ ਇਨਪੁਟ ਮਕੈਨਿਜ਼ਮ ਕੀ ਇੱਕ ਨਿਰਦੇਸ਼ਕ ਉਪਕਰਣ ਹੈ? ਜੇਕਰ ਹੈ, ਤਾਂ ਇਸ ਦੀ ਨਿਖੇਧੀ ਕਿਵੇਂ ਹੈ?
（ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ）。
resolution ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੀ ਰੈਜਲੂਸ਼ਨ, ਉਪਯੋਗ dpi ਜਾਂ dpcm。
scan ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੀ ਸਕੈਨ ਪ੍ਰਕਿਰਿਆ。
ਸਕ੍ਰਿਪਟਿੰਗ ਸਕ੍ਰਿਪਟਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਕੀ (ਉਦਾਹਰਨ ਵਜੋਂ JavaScript) (ਮੀਡੀਆ ਕਿਵੇਂ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ ਹੈ)。
ਅੱਪਡੇਟ ਮੀਡੀਆ ਕਿਵੇਂ ਚੌਦਾਰੀ ਸਕੇ ਸ਼ਾਇਦ ਸੋਧ ਕਰ ਸਕਦੇ ਹਨ (ਮੀਡੀਆ ਕਿਵੇਂ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ ਹੈ)。
ਵਿਚਾਰ ਵਿਚਾਰ ਚੌਦਾਰੀ