用 CSS 媒体查询替换观看 window.resize？答案

【问题标题】：Replace watching window.resize with a CSS media query?用 CSS 媒体查询替换观看 window.resize？
【发布时间】：2015-08-24 14:10:00
【问题描述】：

当窗口大小调整到 400px 断点以下时，我需要调用一个函数。处理此问题的明显解决方案是像这样观看window.resize() 事件：

Window.Resize 解决方案

脚本：

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

Window.resize Fiddle

但是，当调整大小发生时，这会持续触发，这可能会导致对该函数的数百次调用，并且会在不必要的时间触发，例如从 300 像素调整到 200 像素；

在试图找到避免这种情况的方法时，我想出了一个使用 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 监视窗口以将大小调整为 400 像素，然后将任意过渡应用于不可见元素。一旦完成，transitionend 事件就会被触发，并且监听器会调用我的函数。这只会在屏幕低于 400 像素时发生一次，而当它回到高于 400 像素时会发生一次。

现在这个解决方案当然有缺陷：

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

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

【问题讨论】：

只是补充一点，我不打算实际实现这个，因为我更喜欢可读性而不是在我的运行时减少几个调用/毫秒（如果它甚至这样做的话），这更多是出于好奇。
stackoverflow.com/questions/4298612/…
或stackoverflow.com/a/5490021/1264804
看看 enquire.js，它可以让您使用 js 响应 CSS 媒体查询。 wicky.nillia.ms/enquire.js
@isherwood 感谢那些看起来更好的我会使用那些，我不认为这是最好的路线，我只是觉得它很有趣。

标签： javascript jquery css media-queries window-resize

【解决方案1】：

我认为您的主要问题是将代码拆分到很多地方。是的，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 会起作用，但保持同步似乎很麻烦。

【讨论】：