使用媒体查询覆盖JavaScript定义的属性

Question

我通过计算window.height和window.width属性然后将值分配给DIV来设置DIV的高度和宽度。现在DIV适合整个浏览器视口。

我现在想要在用户调整窗口大小时使用媒体查询覆盖这些维度。在较小的屏幕上，我想将DIV的高度和宽度设置为比窗口高度和宽度更小的尺寸？

这可能吗？使用JavaScript设置的高度和宽度是否可以被媒体查询覆盖？

Answer 1

只要您保持媒体查询非常简单，就可以使用简单的javascript if / else语句。

 if (screen.width < 480) {
     // Set some variables
 } else {
     // Set other variables
 }

另一种选择，就是较新的window.matchMedia API。