运行 ❯
获取您的
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
前往空间
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p>If the viewport is less than, or equal to, 700 pixels wide, the background color will be yellow. If it is greater than 700, it will change to pink.</p> <p><strong>Resize the browser window to see the effect.</strong></p> <script> function myFunction(x) { if (x.matches) { // If media query matches document.body.style.backgroundColor = "yellow"; } else { document.body.style.backgroundColor = "pink"; } } // Create a MediaQueryList object var x = window.matchMedia("(max-width: 700px)") // Call listener function at run time myFunction(x); // Attach listener function on state changes x.addEventListener("change", function() { myFunction(x); }); </script> </body> </html>
