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

Question

在以下网址上：

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/

我的问题是：有没有办法根据上述条件是否符合来创建一个标志（真/假）？

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

谢谢！

Answer 1

正如@Huangism和@phuzi指出的那样，方法是使用：srcset。唯一需要注意的是IE尚未支持（截至今日）。

Answer 2

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

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 */ 
}