响应式布局（实例一）

响应式布局（实例一）

第一步，最基本的布局-固定布局(960px)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>response layout</title>
<style type="text/css">
 /*利用html5中的新元素布局
  最初我们使用固定布局；
 */
 body{
     margin-top:35px;
     text-align:center;
     color:white;
 }
 h3 ,p{
     padding:20px; 
 }
 .container{
     width:960px;
     margin:0 auto; 
 }
 #header,#navigation,#footer,#mainbody,#sidebar{
     height:100px;
     line-height:25px;
     margin-bottom:10px;
 }
 #header{
     background:black;
 }
 #navigation{
     background:green;
 }
 #mainbody,#sidebar{
     height:300px;
     float:left;
 }
 #mainbody{
     width:620px;
     margin-right:20px;
     background:pink;
 }
 #sidebar{
     width:320px;
     background:blue;
 }
 #footer{
     background:red;
     clear:both;
 }
</style>
</head>
 <body>
    <div class="container">
       <header id="header"><h3>页头</h3></header> 
       <nav id="navigation"><h3>导航</h3></nav>
       <section id="mainbody">
          <h3>主体</h3>
          <p>内容</p>
       </section>
       <aside id="sidebar">
        <h3>边栏</h3>
        <p>内容</p>
       </aside>
       <footer id="footer"><h3>页脚</h3></footer>
    </div><!--end .container -->
 </body>
</html>

第一部响应：当浏览器可视页面大于1200px的时候(当然这里需要一些计算滴呀)

 @media screen and (min-1200px){
    /*增加页面的宽度*/
    .container{
        width:1170px;
    }
    #mainbody{
      width:770px;
      margin-right:30px;
    }
    #sidebar{
      width:370px;
    }
 }

第二部响应：当浏览器max-width：959px的时候，使用百分比布局；

 @media screen and (max-959px){
     .container{
         width:100%;
     }
     #mainbody{
         width:67%;
     }
     #sidebar{
        width:30%;
        float:right;/*这个时候就要考右边浮*/
        
     }
 }

效果:(等比的进行了缩小滴呀)

第三部响应：当max-width：767px的时候，

 @media screen and (max-767px){
    #mainbody,#sidebar{
        width:100%; /*两个宽度相等*/
        float:none; /*去除浮动*/
    }
 }

最终的响应效果：（成为了一栏的效果，方便我们阅读滴呀）

这只是一个简单的实例，后面我们再总结。