HTML5 -- 使用css3实现简单的响应式布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name ="viewport" content="width = device-width,initial-scale=1">
 6     <title>index01</title>
 7     <link href="style01.css" type="text/css" rel="stylesheet">
 8 </head>
 9 <body>
10     <div class="heading"></div>
11     <div class="container">
12         <div class="left"></div>
13         <div class="main"></div>
14         <div class="right"></div>
15     </div>
16     <div class="footing"></div>
17 </body>
18 </html>

css3文件：

  1 *{
  2     margin:0px;
  3     padding: 0px;
  4 }
  5 .heading,
  6 .container,
  7 .footing{
  8     margin: 10px auto;
  9 }
 10 
 11 .heading{
 12     height: 100px;
 13     background-color: red;
 14 }
 15 .left,
 16 .right,
 17 .main{
 18     height: 300px;
 19     background-color: yellow;
 20 }
 21 .footing{
 22     height: 100px;
 23     background-color: gray;
 24 }
 25 <!--media="only screen and (max-640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表-->
 26 @media screen and (min- 960px){
 27     .heading,
 28     .container,
 29     .footing{
 30         width:960px;
 31 
 32     }
 33     .left,
 34     .main,
 35     .right{
 36         float: left;
 37         height: 500px;
 38     }
 39     .left,
 40     .right{
 41         width:200px;
 42 
 43     }
 44     .main{
 45         margin: 0px 5px;
 46         width:550px;
 47     }
 48     .container{
 49         height: 500px;
 50     }
 51 }
 52 @media screen and (min- 600px) and (max- 960px){
 53     .heading,
 54     .container,
 55     .footing{
 56         width: 600px;
 57 
 58     }
 59     .left,
 60     .main{
 61         float: left;
 62         height:400px;
 63 
 64     }
 65     .right{
 66         display: none;
 67     }
 68     .left{
 69         width: 160px;
 70 
 71     }
 72     .main{
 73         width: 435px;
 74         margin-left: 5px;
 75     }
 76     .container{
 77         height: 400px;
 78     }
 79 }
 80 
 81 @media screen and (max- 600px){
 82     .heading,
 83     .container,
 84     .footing{
 85         width: 400px;
 86     }
 87     .left,
 88     .right{
 89         width: 400px;
 90         height: 100px;
 91     }
 92 
 93     .main{
 94         margin-top: 10px;
 95         width:400px;
 96         height:200px;
 97     }
 98     .right{
 99         margin-top: 10px;
100 
101     }
102     .container{
103         height: 420px;
104     }
105 }

本文的代码，可以实现同一个界面，在不同宽度的渲染宽度下显示不同的布局。

原文链接：http://blog.csdn.net/redguy_anluo/article/details/51353235