Question

我愿意做出TNW所做的事情。如果你在屏幕上看到＆lt; 900px，它隐藏侧栏导航并显示向下滑动的选项。我知道他们正在使用媒体查询，但css对我来说看起来非常庞大和复杂，而且我不确定它是否仅仅通过媒体查询或浏览器调整大小选项来帮助它。

什么是minimilist并且很容易实现此选项。我唯一的任务是为小于800px的屏幕显示此选项

Answer 1

你最好的选择是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{
    }
}

Answer 2

@Ani对一些事情是正确的。绝对要确保你有一个视口标签，当然还要使用媒体查询来控制各种视口宽度的CSS。

但是，你真的不需要他们发布的JS。使用.resize也不是最好的主意。相反，使用像mediaCheck这样的东西，它使用matchMedia来根据媒体查询有条件地执行JS。如果您必须使用.resize来使用Cowboy's Throttle plugin之类的内容，因为每个浏览器都会以不同的方式处理resize事件。

关于实现非画布导航（如TNW）的精彩教程是over at Smashing Mag。基本上，使用min-width查询（从最小到最大）构建样式，并且仅使用JS来管理特定断点处的导航状态。

响应边栏 - 如何实现？

2 个答案: