用CSS媒體查詢替換正在觀看的window.resize？

當窗口在400px斷點下方調整大小時，我需要調用一個函數。顯而易見的解決辦法來處理這將是觀看window.resize()事件是這樣的：用CSS媒體查詢替換正在觀看的window.resize？

Window.Resize解決方案

腳本：

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

Window.resize Fiddle

然而，這持續不斷地觸發作爲調整大小會發生，這可能會導致數百個此函數調用，並會在不經意間觸發，如調整大小從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，然後將任意轉換應用到不可見元素。完成後，將觸發該事件並且偵聽器會調用我的函數。這種情況只發生在屏幕低於400px時纔會發生，一次發生在屏幕上方。

當然現在也有陷阱該解決方案：

IE8/IE9不支持transitionend
您必須創建一個不必要的元素爲每個調整你想要觀看
事件該代碼本質上更加混亂，因爲它是一種「黑客」技術。

但除了那些垮臺，我想知道如果這種方法會更有效率/更好地使用，如果你想避免連續調用。或者，媒體查詢的底層實現比調整大小的事件做更多的工作。

來源

2015-08-24 DasBeasto

只是爲了補充一點，我不打算實際實現這一點，因爲我更喜歡可讀性來從我的運行時中刪除幾個調用/ ms（如果它甚至可以），這更加出於好奇。 – DasBeasto

http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing – isherwood

或http：// stackoverflow。com/a/5490021/1264804 – isherwood

我認爲你的主要問題是在許多地方分割代碼。是的，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會的工作，但它似乎很繁瑣保持同步。

來源

2015-08-24 14:17:15 somethinghere

用CSS媒體查詢替換正在觀看的window.resize？

回答

相關問題