css - 响应式侧边栏 - 如何实现？

Question

我愿意做类似TNW所做的事情。如果您在屏幕上看到 < 900 像素，它会隐藏侧栏导航并显示向下滑动的选项。我知道他们正在使用媒体查询，但 css 对我来说看起来很大而且很复杂，而且我不确定它是仅在媒体查询的帮助下完成的，还是也在使用浏览器调整大小选项。

什么是极简主义者，并且易于实现此选项。我唯一的任务是为小于 800 像素的屏幕显示此选项

Answer 1

@Ani is right about a few things. Definitely make sure you have a viewport tag and of course use media queries to control your CSS at various viewport widths.

However, you really don't need the JS they posted. It's also not the best idea to use .resize. Instead, use something like mediaCheck which uses matchMedia under the hood to conditionally execute JS based on media queries. If you must use .resize for something use something like Cowboy's Throttle plugin because each browser handles the resize event differently.

A great tutorial on implementing an off-canvas navigation (like TNW) is over at Smashing Mag. Essentially, build your styles up using min-width queries (smallest to biggest), and only use JS to manage the state of the navigation at specific breakpoints.

Answer 2

您最好的选择是 css，它非常简单：

CSS：

sidebar{
  //your css
}

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

另外，不要忘记添加元标记：

    <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{
    }
}