更换观察窗.使用CSS媒体查询来调整大小

Replace watching window.resize with a CSS media query?

本文关键字：查询 调整 媒体 CSS 观察 使用      更新时间：2023-09-26

我需要调用一个函数当一个窗口的大小低于400px的断点调整。处理这个问题的一个明显的解决方案是像这样观察window.resize()事件:

窗口。调整解决方案

脚本:

$(window).resize(function(){
    if($(window).width() < 400)
       console.log("trigger");
});

窗口。调整小提琴

然而，它会随着大小调整的发生而不断触发，这可能会导致对该函数的数百次调用，并且会在不必要的时候触发，比如将大小从300px调整到200px;

在试图找到避免这种情况的方法时，我想出了一个使用CSS媒体查询的解决方案:

CSS媒体查询解决方案

脚本:

$(".foo").on('transitionend', function () {
   console.log("trigger")
});
css: 

.foo
{
    width: 0;
    height: 0;
    color: white;
    transition: 0.1s;
}
@media screen and (max-width: 400px) {
    .foo {
        color: gray;
    }
}

CSS Media Query Fiddle

这里的想法是，CSS观察窗口调整到400px，然后应用一个任意过渡到一个不可见的元素。完成之后，将触发transitionend事件并调用侦听器。这只在屏幕低于400px时发生一次，在屏幕高于400px时发生一次。

当然这个解决方案也有缺陷:

  • IE8/IE9不支持transitionend
  • 你必须为你想要观看的每个调整大小事件创建一个不必要的元素
  • 代码本质上更令人困惑，因为它是一个"黑客"技术。

但是除了这些缺点之外，我想知道如果你想避免连续的调用，这种方法是否会更有效/更好地使用。或者，媒体查询的底层实现是否比resize事件做了更多的工作?

我认为你的主要问题是将代码分割到很多地方。是的，CSS很好，但是现在你的代码依赖于两个地方!最简单的排序方法就是将你的值存储在JS中:

var isSmall = false;
$(window).resize(function(){
    if(
        (window.innerWidth < 400 && !isSmall) ||
        (window.innerWidth > 400 && isSmall)
    ){
        console.log('we have passed the treshold!');
        isSmall = !isSmall;
    }
}).resize();

我想使用CSS transitionend将工作，但它似乎是如此繁琐，以保持同步

相关文章：