jQuery的窗口寬度的狀態

Question

後來編輯： 我已經試過這樣：

$(document).ready(function() { 
if ($(window).width() > 800) { 
    $("#header").hide(); 
} 
else { 
$("#header").show(); 
} 

}); 

如果我調整低於800的窗口標題仍然是不可見的。 問題是什麼？ 我無法使用CSS媒體查詢，因爲我想在窗口大於800時執行其他功能。

Answer 1

如果您想在JavaScript中使用JQuery執行此操作，您可能需要了解以下幾件事：現在寬度是多少，用戶調整後的寬度是多少？你可能有代碼看起來是這樣的：

function checkSize(){ 
    if ($(window).width() > 1200){ 
    //do whatever 
    } 
} 

//When the page is loaded 
$(document).ready(function(){ 
    //Add a listener to check the size of the document when you load 
    $(document).resize(checkSize); 

    //Check the size now. 
    checkSize(); 
}); 

或者，你可以使用CSS媒體查詢時，頁面是有一定的大小來調節CSS，但它不會執行任何JavaScript。這裏有一個例子：

@media all and (max-width: 1199px) { 
    #header{ 
    display:none; 
    } 
} 

這有一些更有益的例子和解釋：http://css-tricks.com/css-media-queries/