通过 javascript 检测媒体查询并应用适当的数据状态

Question

我需要javascript #help.

我有一个对象 (#objID) 具有三种不同的数据状态 (A B & C) (https://www.dropbox.com/s/zn19k87eu2hp8ow/data-states.jpg?dl=0)...每个状态都包含一些 css 来描述它的外观..

我想使用 javascript 检测媒体查询更改并将适当的数据状态添加到 #objID。

（即。如果屏幕小于 320 像素，则将 [data-state="A"] 添加到 #objID

或者如果屏幕在 320px 和 728px 之间，则切换到 [data-state="B"]

或者如果屏幕大于 1024px 则切换到 [data-state="C"]

) 类似这个概念..http://zerosixthree.se/detecting-media-queries-with-javascript/

但我不确定如何实施。请帮忙。谢谢

Answer 1

您需要 onresize 活动

window.onresize = function(event) {
    //...
};

屏幕有两个维度，width和height，而你描述的是一维比较，这并没有给我们足够的信息来说明你想要实现什么。无论如何，您可以在 onresize 事件中使用 window.innerWidth 和 window.innerHeight。

Answer 2

为了简化你可以这样做：

window.matchMedia("(max-width: 320px)").addListener(function() {
    // Change the value of `data-state`
});

window.matchMedia("(min-width: 321px) and (max-width: 728px)").addListener(function() {
    // Change the value of `data-state`
});

但是您需要确保浏览器支持 window.matchMedia 并处理维护状态等，以了解您何时从一个断点越过另一个断点并确定哪个处于活动状态，因为两者都会在您退出时触发并输入断点。

至于在 window.onresize 上执行此操作，这不是一种非常有效的方法，如果您这样做，则必须 throttle/debounce。使用 matchMedia 只会在断点更改时触发，而不是在不断调整大小时触发。它还可以让您的 CSS 媒体断点与您的 JS 保持同步。

This is a Polyfill for browsers which do not support it as mentioned and this guide 也可能对您有所帮助。

然而：

I have an object(#objID) with three different data state (A B & C). Each state contain some css to describe the look of it..

听起来好像您想更改应用于基于 data-state 属性的元素的 CSS 样式，您要根据断点更改它？

如果我错了请纠正我，但为什么你不能只使用媒体查询来更改应用于它的 CSS？

@media only screen and (max-width: 320px) {
    /* State A */
   .css-selector {
        color: red;
   }
}

@media only screen and (min-width: 321px) and (max-width: 728px) {
    /* State B */
   .css-selector {
        color: green;
   }
}

@media only screen and (min-width: 728px) {
   /* State C */
   .css-selector {
        color: blue;
   }
}

通过 javascript 检测媒体查询并应用适当的数据状态

Detecting media queries via javascript and apply appropriate data-state

javascript

media-queries