HTML5文件:
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