css - Wordpress 主题 211 的侧边栏如何使用 CSS 以特定的窗口大小堆叠？

Question

这是主题全尺寸的时候：

当浏览器的窗口变小时，侧边栏会移到底部，主要内容会占据整个布局：

我认为这是解决问题的 CSS：

}
#primary {
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
}
#content {
    border-top: 1px solid #444;
    margin: 0 34% 0 7.6%;
    padding: 20px 0 1.625em;
    width: 58.4%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

（不太确定）。

这是主题的演示。

侧边栏如何使用 CSS 以特定的窗口大小堆叠（让主要内容占据所有空间）？

Answer 1

这称为响应式设计。检查这个-coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/。

在上面的 wordpress 主题中有一个文件 style.css 从https://s2.wp.com/wp-content/themes/pub/twentyeleven/style.css链接。在这个文件中，有一些代码可以让侧边栏在特定的窗口大小下堆叠。

@media (max-width:800px) {
  [...]
  #main #secondary {
    float:none;
    margin:0 7.6%;
    width:auto;
  }
  [...]
}

@media (max-width:800px) 是使侧边栏自动调整到指定屏幕尺寸以下的东西。我希望你明白了。