使用JS编辑CSS媒体查询

Edit CSS media queries with JS

本文关键字：媒体 查询 CSS 编辑 JS 使用      更新时间：2023-09-26

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

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

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

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

此操作有效，但会放弃媒体查询。如何解决这个问题？

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

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/

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

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

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

源

相关文章：