Question

我正在构建一个网站，我需要它的行为，如果窗口是全屏（或任何大小的宽度＆gt; X px） - 它应该显示侧边栏。如果用户将窗口宽度调整到一定量以下，则侧边栏应消失（显示：无）。

要查看的一个主要示例是Google的新闻页面（news.google.com） - 右侧边栏只有在页面宽度超过特定阈值时才可见。

我通常非常擅长搜索谷歌/堆栈交换并找到我需要的答案，但在这种情况下，也许是因为使用了“动态”一词，但我想不出任何其他方式短语吧，我得到了很多不是我需要的点击。

如果我自己想到一个解决方案，我可能会添加一个javascript监听器，它不断监视“可视区域”的x值，并且有一个不断运行的函数，如果可视区域X那么值低于我的阈值，将我的sidbar div的样式更改为display：none。我认为这样可行，但我不知道这是否是最好的方法。

谢谢。

Answer 1

max-width媒体查询怎么样？

@media screen and ( max-width: 768px ) {
 /* When the viewport is 768px or less, 
    hide #sidebar */
    #sidebar {
        display: none;
    }
}

演示：http://jsfiddle.net/jonathansampson/6Pvyt/show/

对于IE6-8，https://github.com/scottjehl/Respond

Answer 2

我相信CSS媒体查询是Jonathan Sampson已经回答的最佳解决方案，

但正如你在关于使用javascript监听器的问题中暗示的那样，我认为我最好用jQuery的on事件来解释一个更好的（IMO）JS解决方案。

e.g。

jQuery(window).on({
    "resize": function(){
        if(jQuery(window).width() > 750) {
             //code to show sidebar
            jQuery(#sidebar).removeclass("hidden");
        } else {
            //code to hide sidebar e.g.
            jQuery(#sidebar).addclass("hidden");
        }
}
    };
});

Answer 3

您需要的是CSS Media查询。 http://www.w3.org/TR/css3-mediaqueries/

我使用Twitter的bootstrap框架，其中包含大量响应式屏幕功能。

根据窗口宽度动态显示/隐藏内容

3 个答案: