如何用 Javascript 检查 CSS 媒体查询？

Question

以下url：

https://gist.github.com/marcedwards/3446599

我找到了以下 CSS 代码来检查高 DPI 屏幕。

@media
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi) {
    /* Your code to swap higher DPI images */

}

此代码基于：

https://bjango.com/articles/min-device-pixel-ratio/

我的问题是：是否有任何方法可以根据是否满足上述条件来创建标志（true/false）？

我的目标是： 我有一组图像：<img src="..." /> 其中取决于屏幕分辨率（满足或不满足上述条件）我想使用一个图像或其他.

谢谢！

Answer 1

可以使用一些带有 class 的临时元素来更改媒体查询触发器以测试：

HTML:

<p class="my-flag">Did the media query trigger?</p>

CSS:

@media
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi) {
    /* Your code to swap higher DPI images */

.my-flag {
   color: red;
 }
}

如果您需要在 JS 中检查，请询问

if($('.my-flag').style.color == "red")) {
     /* do stuff */ 
}

Answer 2

正如@Huangism 和@phuzi 所指出的，方法是使用：srcset。唯一需要注意的是它还不受 IE 支持（截至今天）。

如何用 Javascript 检查 CSS 媒体查询？

How to check CSS media query with Javascript?

javascript

html

css

media-queries

screen-resolution