Question

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

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

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

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

这有效，但会丢弃媒体查询。怎么解决这个问题？

Answer 1

如果您只是检查方向更改，可以使用：

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/

Answer 2

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

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

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

Source

使用JS编辑CSS媒体查询

2 个答案: