2

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

一个典型的例子是谷歌的新闻页面（news.google.com）——有一个右侧边栏，只有当页面宽度超过某个阈值时才可见。

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

如果我自己想一个解决方案，我可能会添加一个 javascript 侦听器，它不断监视“可视区域”的 x 值，并有一个不断运行的函数，如果可视区域 X 值较低，它会执行类似的操作超过我的阈值，将我的 sidbar div 的样式更改为 display:none。我认为这会起作用，但我不知道这是否是最好的方法。

谢谢你。

4

3 回答 3

7

最大宽度的媒体查询呢？

@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

于 2012-05-30T20:57:05.403 回答
1

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

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

例如

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");
        }
}
    };
});
于 2012-05-30T21:58:14.830 回答
0

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

我使用 Twitter 的引导框架，其中包括一整套响应式屏幕功能。

于 2012-05-30T20:57:28.127 回答