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

Question

我正在建立一个网站,我需要它的行为,如果窗口是全屏(或任何大小的宽度> X px) - 它应该显示侧边栏.如果用户将窗口宽度调整到一定量以下,则侧边栏应消失(显示:无).

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

我通常是在谷歌搜索/堆栈交流和寻找我需要的答案还算不错,但在这种情况下,也许是因为这个词的使用"动态"的,但我想不出任何其他方式句话吧,我得到了很多不是我需要的命中.

如果我觉得我自己的解决方案,我或许会添加Javascript监听器,不断地监视"可视区域"的x值,并有一个函数不断运行,将这样做,如果可视区域的X值越低比我的阈值,将我的sidbar div的样式更改为display:none.我认为这样可行,但我不知道这是否是最好的方法.

谢谢.

Answer 1

怎么样最大宽度媒体查询？

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