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

【问题标题】：How does the sidebar of the Wordpress theme twentyeleven manage to stack down at certain windows size with CSS?Wordpress 主题 211 的侧边栏如何使用 CSS 以特定的窗口大小堆叠？
【发布时间】：2011-11-09 16:01:35
【问题描述】：

这是主题全尺寸的时候：

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

我认为这是解决问题的 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%;
}

（不太确定）。

这是demo的主题。

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

【问题讨论】：

因为它是一个流畅的主题，您可以在这里阅读更多内容w3.org/TR/css3-mediaqueries
@Side 我知道这是一个流畅的布局，它不使用媒体查询智能手机。我想知道怎么做。

标签： css wordpress responsive-design

【解决方案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) 是使侧边栏自动调整到指定屏幕尺寸以下的东西。我希望你明白了。

【讨论】：