WordPress的主题twentyeleven的侧边栏如何设置在CSS的某些窗口大小？

问题描述：

这是当主题是全尺寸：WordPress的主题twentyeleven的侧边栏如何设置在CSS的某些窗口大小？

enter image description here

当浏览器的窗口变小边栏进入底部和主要内容占据整个布局：

enter image description here

我认为这是做窍门的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中使用某些窗口大小进行堆叠（让主要内容占据所有空间）？

因为它是一个流畅的主题，你可以在这里阅读更多这是如何工作的http://www.w3.org/TR/css3-mediaqueries/ – Side

@我知道这是一个流体布局，它不使用媒体查询智能手机。我想知道如何。 – alexchenco

答

这被称为响应式设计。检查 - 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）是使边栏自动调整到低于指定的屏幕大小的东西。我希望你明白了。

WordPress的主题twentyeleven的侧边栏如何设置在CSS的某些窗口大小？

相关推荐