Window matchMedia() 方法

  • အဆင်းပြင် ပြန် location
  • နောက်ဆုံး စားပွား moveBy()
  • အဆင်းပြင် ပြန် Window အရာ

定义和用法

matchMedia() 方法返回带有查询结果的 MediaQueryList。

另请参阅：

MediaQueryList 对象

媒体查询

matchMedia() 方法的媒体查询可以是 CSS @media 规则的任何媒体特性，例如 min-height、min-width、orientation 等。

实例

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

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

实例

例子 1

屏幕/视口是否大于 700 像素宽：

if (window.matchMedia("(max-width: 700px)").matches) {
  // 视口宽度小于或等于 700 像素
} else {
  // 视口宽度大于 700 像素
}

例子解释

本例运行媒体查询并将其与当前窗口状态进行比较。

如需在窗口状态更改时运行响应式媒体查询，请将事件侦听器添加到 MediaQueryList 对象（请参阅下方“更多实例”）：

例子 2

如果视口小于或等于 500 像素宽，则将背景颜色设置为黄色，否则设置为粉红色：

// 创建匹配函数
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// // 创建 MediaQueryList 对象
const mmObj = window.matchMedia("(max-width: 700px)")
// 在运行时调用 match 函数：
myFunction(mmObj);
// 添加 match 函数作为状态变化的监听器：
mmObj.addListener(myFunction);

ပြောင်းလဲကုန်း

window.matchMedia(mediaQuery)

သဘောပါ

သဘောပါ ဖော်ပြ
mediaQuery လိုအပ်သည်။ ပြက်တင် အမှုဖြစ် အမှတ်အသား

အပြန်အစား

အမျိုးအစား ဖော်ပြ
အမှုဖြစ် နှင့် စက်မှုအစား ပြောင်းလဲ

ဘရောက်သတ္တိ အားလုံး

အားလုံး ဘရောက်သတ္တိ ကို ထောက်ပံ့သည် matchMedia()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ထောက်ပံ့ 11 ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့
  • အဆင်းပြင် ပြန် location
  • နောက်ဆုံး စားပွား moveBy()
  • အဆင်းပြင် ပြန် Window အရာ