经典布局实现-响应式

by lai chendong

HTML

<nav class="top-nav"></nav>
<div class="main-container clearfix">
  <nav class="left-nav"></nav>
  <div class="main">
    <section></section>
  </div>
</div>
<footer class="footer"></footer>

CSS

.top-nav{
  height:80px;
  margin-bottom:20px;
}
.main-container, .footer{
    width:85%;
    max-width:1260px; 
    margin:0 auto;
    margin-bottom:20px;
}
.footer{
  height:100px;
}

section{
  height:600px;
  margin-left:20px;
}

/*大于600宽的屏幕上, 浮动布局*/
@media screen and (min-width:600px) {
  .left-nav{
    float:left;
    width:25%;
    height:300px;
  }
  .main{
    width:75%;
    float:right;
  }
}

/* 小于600宽的屏幕上，取消浮动，左侧导航直接显示到内容上边 */
/* 主内容和footer宽度从85%变成100% */
@media screen and (max-width:600px) {
  .main-container, .footer{
    width:100%;
  }
  .left-nav{
    height:50px;
    margin-bottom:20px;
    /* display:none; */
    /*或者干脆缩起来，显示一个小图标，也有会放到主内容下面的，我们放到主内容上面*/
  }

  section{
    margin:0;
  }
}

.top-nav, .left-nav, section, .footer{
  background:#ccc;
}
.clearfix:after{
  content:" ";
  display:table;
  clear:both;
}