html - 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;
    }
}