主页
JS 参考手册
Window matchMedia() 方法
tryjsref_win_matchmedia2
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <body> <p>如果视口小于或等于 700 像素宽，背景色将为黄色。 如果大于 700，它将变为粉红色。</p> <p>调整浏览器窗口大小以查看效果。</p> <script> function myFunction(x) { if (x.matches) { // 如果媒体查询匹配 document.body.style.backgroundColor = "yellow"; } else { document.body.style.backgroundColor = "pink"; } } var x = window.matchMedia("(max-width: 700px)") myFunction(x) // 运行时调用监听函数 x.addListener(myFunction) // 在状态变化时附加监听函数 </script> </body> </html>