Question

这可能很明显，但我有些困惑。

我有一个CSS媒体查询，该查询会根据窗口大小更改样式：

@media screen and (max-width:39.9375em) {
  ...
}

我需要编写一个jQuery函数，以在屏幕大小低于媒体查询中提到的大小时也执行。我该怎么办？

function matchScreen() {
    if ($(window).innerWidth() < ???) {
       ...
    }
}

Answer 1

您可以使用window resize事件，并在处理程序中使用window.matchMedia检查该媒体查询是否匹配。

例如，遵循以下原则：

$(window).on("resize", function() {
    if (window.matchMedia("(max-width:39.9375em)").matches) {
        // It's a match
    } else {
        // It's not a match
    }
});

您还可以使用来自matchMedia的事件回调：

window.matchMedia("(max-width:39.9375em)").addListener(function(e) {
    if (e.matches) {
        // It's a match
    } else {
        // It's not a match
    }
});

...我怀疑（但不知道）的效率更高。

无论哪种方式，如果您在分支机构中所做的操作导致调整大小滞后，您可能都希望对此进行一些反跳。

将功能条件与媒体查询匹配

1 个答案: