在瀏覽器窗口調整大小時改變JS邏輯

隨着使用CSS @media查詢的流行程度，我們現在可以根據查看它們的分辨率對網頁進行樣式設置。調整瀏覽器窗口大小時，將依賴寬度的樣式/佈局。在CSS中，這很簡單，例如在瀏覽器窗口調整大小時改變JS邏輯

// The heart of "responsive design." 
@media screen and (max-width: 1000px) { ... }

在響應式設計的精神中，我們可以根據分辨率變化隨時調整JavaScript邏輯嗎？例如，如果我們每10秒輸出一個數字「5」的腳本，當瀏覽器窗口調整爲< 300px時，我們可以將其更改爲輸出「7」（以相同的間隔）？

// Default script 
setTimeout(function() { 
    var i = 5; 
    console.log(i); 
}, 10000); 

// How to change the value of i to 7, upon window resize? 
// Ideally, without a page reload.

來源

2012-08-06 moey

如果您好奇，我試圖修改顯示3張圖片縮略圖的旋轉木馬滑塊腳本，並顯示下一個按鈕。點擊該按鈕將推進3個縮略圖。現在，在小屏幕上查看時，我只想顯示1個縮略圖;並且，下一個按鈕應該每次前進1個縮略圖。 – moey 2012-08-06 14:53:25

你不能準確地通過CSS & JS之間的變量，但使用Javascript公開resize的事件，你可以綁定到window。

例如：

function (event) { 
    if (event.srcElement.outerWidth <= 1000){ 
    // do something 
    } 
}

Working JSFiddle Demo

來源

2012-08-06 14:47:43 briangonzalez

處理的window.resize事件：

window.onresize = function() { 
    // check if the new height/width is <300 
    // change your i variable 
};

爲了這個工作，你i變量必須在一個範圍是通過調整大小處理程序共享和匿名傳遞給setTimeout。

答案爲Getting window height/width。

來源

2012-08-06 14:50:37 jbabey

如果你想要的是表現出許多（基於含），每10秒，在這段代碼是：

setInterval(function() { 
    var num = (window.outerWidth <= 300) ? 7 : 5; 
    console.log(i); 
}, 10000);

如果你想要的是顯示數字時，窗口大小@jbabey回答說，你應該處理window.reseize事件。

來源

2012-08-06 14:53:57 Diego

在瀏覽器窗口調整大小時改變JS邏輯

回答

相關問題