使用 JS 编辑 CSS 媒体查询答案

【问题标题】：Edit CSS media queries with JS使用 JS 编辑 CSS 媒体查询
【发布时间】：2014-12-30 08:54:31
【问题描述】：

我需要通过 JS 设置背景大小。这是我当前的 CSS 代码，可以满足我的需要（根据方向无缝设置大小 %）

background-size: 50%;
@media all and (orientation:landscape) {
    background-size: auto 50%;
}

我需要更改上述代码中 50% 值的两个实例。现在我有这个

element.css("background-size", foo.toFixed(0) + '%');

这可行，但会丢弃媒体查询。怎么解决？

【问题讨论】：

定义一个类/ID。设置类/id的属性。
使用 jQuery 的 css 函数是不可能做到这一点的，因为它通过设置内联 style 属性来工作。 Media queries don't work with inline styles.
谢谢，这澄清了事情

标签： javascript html css

【解决方案1】：

要添加条件来检查窗口大小是否为横向，您可以使用：

if(window.innerHeight < window.innerWidth){
    element.css("background-size", foo.toFixed(0) + '%');
}

如果您将它用于移动开发，我会看看 jQuery 移动库。

Source

【讨论】：

【解决方案2】：

如果您只是检查方向变化，您可以使用：

window.addEventListener('orientationchange', doSomethingOnOrientationChange)

但如果您真的想检查是否触发了媒体查询，您可以使用Window.matchMedia() 来监听媒体查询事件：

if (matchMedia) {
    var mm = window.matchMedia("(orientation:landscape)");
    mm.addListener(onMatchedMedia);
    onMatchedMedia(mm);
}
function onMatchedMedia(mm) {
    if(mm.matches){
        el.style.backgroundSize = 'auto ' + foo.toFixed(0) + '%';
    } else {
        el.style.backgroundSize = foo.toFixed(0) + '%';
    }
}

这是一个使用 max-width 的演示： http://jsfiddle.net/wxgs9g9s/

【讨论】：