CSS3媒体查询 - 两种布局

Question

我正在尝试使用css3媒体查询，我正在尝试创建两种不同的布局，一种用于小屏幕（手机，平板电脑），另一种用于大屏幕。布局应包括三个主要div（a，b，c）。

  <div class="wrapper">
      <div id="a"></div> 
      <div id="b"></div>
      <div id="c"></div>
  </div>

小屏幕顶部有div#a，另外两个div div#b, div#c位于第一个div下方50％-50％，请参见图片：

较大的屏幕应该连续显示所有div，请参阅图片：

这是我迄今为止所做的工作，但没有按预期工作..

http://jsfiddle.net/dT9HY/

Answer 1

这将是基本的想法。包括造型，便于在盒子上填充。

http://fiddle.jshell.net/E4jjt/14/
http://fiddle.jshell.net/E4jjt/14/show/

* {
  /* http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
.wrapper:before, .wrapper:after {
    content: " ";
    display: table;
}
.wrapper:after  {
    clear: both;
}

.wrapper > div {
    min-height:200px;
    width:33.333333%;
    float: left;
    padding: 15px;
    position: relative;
    /* extra cosmetics */
    color: #fff;
    text-align: center;
    font: 1.5em Georgia;
}
#a {
    background-color: #252525;
}
#b {
    background-color:#ACACAC;
}
#c {
    background-color:#F4CF40;
}

@media all and (max-width: 800px) {
    #a {
        width: 100%;
    }
    #b, #c {width: 50%;}
    #b {
        clear: left;
    }
}