如何在浏览器上堆叠或隐藏我的侧边栏调整大小

Question

我拼命想让我的网站移动友好。为了使事情复杂化，虽然我熟悉HTML，但我也是一个CSS菜鸟。

我希望强制我的浮动侧边栏堆叠以获得较小的分辨率（iPhone，平板电脑等）。如果没有，我愿意隐藏这个糟糕的事情。

我很肯定我看到了有关如何执行此操作的信息，但无法通过在浏览器调整大小上搜索“侧栏堆栈”来重新定位，“在浏览器调整大小时隐藏侧边栏” 或其任何变体。

这是我用来试验的 test page 。

Answer 1

使用media query。当文档小于750px宽度时：

@media screen and (max-width: 750px)  {
  aside { display: none; }
  article { width: 100%; }
} 

您还可以找到标准设备here的摘要列表。

Answer 2

如果您想要移动设备友好的用户界面，可以使用Bootstrap的导航栏。这是一个example。