響應側邊欄 - 如何實現？

Question

我願意做出類似TNW所做的一樣。如果您在屏幕< 900px上看到，它將隱藏側欄導航並顯示向下滑動的選項。我知道他們正在使用媒體查詢，但css看起來相當龐大而且複雜，而且我不確定它是否僅通過媒體查詢或瀏覽器調整大小選項的幫助來完成所有工作。

什麼是minimilist，容易實現這個選項。我唯一的任務是較小的顯示此選項的屏幕比800像素

Answer 1

@Ani對一些事情是對的。絕對確保你有一個視口標籤，當然也可以使用媒體查詢來控制你的CSS在不同的視口寬度。

但是，你真的不需要他們發佈的JS。使用.resize也不是最好的主意。相反，使用像mediaCheck這樣的內部使用matchMedia的條件來有條件地執行基於媒體查詢的JS。如果您必須使用.resize來使用類似Cowboy's Throttle plugin的內容，因爲每個瀏覽器都會以不同方式處理resize事件。

關於實現非畫布導航（如TNW）的一個很好的教程是over at Smashing Mag。實質上，使用min-width查詢（最小到最大）來構建樣式，並且只使用JS來管理特定斷點處的導航狀態。

Answer 2

你最好的選擇是CSS，這是很簡單的：

CSS：

sidebar{ 
    //your css 
} 

@media only screen and (max-width:800px){ 
    sidebar{ 
     your css for 800width 
    } 
} 

另外，不要忘了添加meta標籤：

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

如果使用jQuery：這不是首選，但如果你不希望使用CSS則：

$(document).ready(function() { 
    responsive(); 
    $(window).resize(function() { responsive(); }); 
}); 

function responsive(){ 
    var winWidth = $(window).width(); 
    if(winWidth < 800) { 
     // do stuff here 
    } 
    else{ 
    } 
}