css - 将 div 折叠到 100% 的 iphone 布局

Question

如果我没有花费数小时挖掘文件和研究，我真的不会发布问题。我一定真的不知道我在找什么:-|

我想知道当响应式设计缩放到 iphone 尺寸时，容器（或容器本身）中的 div 如何以及为什么可以更改为 100% 宽度 - 如下所示：

http://demo2.woothemes.com/whitelight/about/

侧边栏位于主要内容下方，然后里面的 div 拉伸到 100%

它快把我逼疯了！任何帮助/方向都必须赞赏:)

Answer 1

基本媒体查询响应式布局示例：

演示：http: //jsbin.com/ayojan/1/edit

调整浏览器大小以查看效果。

div {
  outline:solid black;
}
.content {
  width:80%;
  float:left;
}
.sidebar {
  width:20%;
  float:left;
}

@media only screen and (max-width: 767px) {
  .sidebar {
    width:100%;
    float:none;
}
  .content {
    width:100%;
    float:none;
  }

}

关键点：在媒体查询中，您取消浮动元素 (float:none) 并将它们设置为宽度：100%；