JQuery Resize Browser Width，Hide Div at> 1024

Question

我試圖完成的事情很簡單。假設您正在查看某個網站，並且您可以使用iPod Touch，一個小型平板電腦或者您自己調整瀏覽器的大小來查看該網站，但瀏覽器的寬度不得超過1024像素，並且div內的文字填充超過所有額外的內容。所以對於我來說，答案對於基本構造來說很簡單。當瀏覽器達到1024像素或更低時隱藏文字。

我試過這個，但它似乎沒有工作。這裏有幫助嗎？

$(window).resize(function(){ 
    if($(window).width() < 1024) { 
     $('h2#head1').hide();} 
    else { 
     $('h2#head1').show();}; 
}); 

Answer 1

在這種情況下，那是因爲你的選擇是關閉的（應該是「H2＃頭像1」或簡稱爲「＃頭像1」，而不是H2＃頭像1）。見http://jsfiddle.net/ERBKU/

不過，我有一對夫婦的其他意見：

1. 這將不處理，直到窗口大小實際上，它不會被處理負荷的意義。所以你需要加載這個邏輯加倍。然而，這導致我點2 ...
2. 我想你會通過結合一點點jQuery和CSS得到更好的結果。我引用Modernizr和早期jQuery Mobile中使用的方法。基本上，在加載和調整大小時，您需要檢測視口寬度，如果它滿足寬度閾值，則將特定的CSS選擇器粘貼到html元素。如果選擇器滿足閾值，則該選擇器可以影響目標元素的CSS屬性。看到這個小提琴：http://jsfiddle.net/b5LYq/1/這條路線的好處是你只需要一小段jQuery，你可以通過在CSS中添加更多佈局規則來輕鬆調整其他元素的顯示屬性。比維護一大塊jQuery來操縱頁面以使其顯示出你想要的方式要容易得多。此外，您可以添加額外的佈局閾值，它仍然可以工作。