javascript中的媒体查询

【问题标题】：Media Queries in javascriptjavascript中的媒体查询
【发布时间】：2014-06-08 09:24:55
【问题描述】：

我想知道如何编写这些值：

@media screen and (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (max-device-width: 550px)

这样我就可以像这样写一个 if 子句，除了上面的值：

if (window.screenWidth >=550 || window.screenWidth >=550 ) {
}

【问题讨论】：

媒体查询的重点不是让您可以根据设备参数在 CSS 中指定规则，而无需使用 javascript？仅供参考，如果您想使用 javascript 将 CSS 规则应用于文档，您可以将规则放在一个类上，然后使用 javascript 将该类添加到 body 标记中。
这可能对flippinawesome.org/2014/03/24/using-media-queries-in-javascript有帮助

标签： javascript css media-queries

【解决方案1】：

我不相信像这样的媒体查询可以作为 JS window 属性使用，尽管可能有插件可以处理这些查询。

一种解决方案是使用 CSS 中的常规查询以特定方式设置任意元素的样式，该特定方式可以通过 javascript 简单地检测到。

CSS：

@media screen and (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (max-device-width: 550px) {
    head { font-family: 'someValue'; }
}

JS（带 jQuery）：

$(function() {
    var foo = $('head').css('fontFamily').split("\"").join("").split("'").join(""); // split/joins needed for cross-browser compatibility
    if(foo === 'someValue') {
        doStuff();
    } else if(foo === 'someOtherValue') {
        doOtherStuff();
    }
}

有点骇人听闻，但它确实有效。我使用该代码的变体进行响应式设计。

【讨论】：