<style type="text/css"> /*屏幕宽度大于900的时候*/ * { padding:0px; margin:0px; font-family:"微软雅黑"; } #header { height:100px; border:solid 1px red; margin:0px auto; } #main { margin:10px auto; height:400px; } #footer { margin:0px auto; height:100px; border:solid 1px red; } @media screen and (min-width:900px) { #header,#footer { width:800px; } #main { width:800px; height:400px;; } #main-left { width:200px; height:400px; border:solid 1px red; float:left; } #main-center { width:394px; height:400px; border:solid 1px red; float:left; } #main-right { width:200px; height:400px; border:solid 1px red; float:left; } } @media screen and (min-width:600px) and (max-width:900px) { #header,#footer { width:600px; } #main { width:600px; height:400px;; } #main-left { width:200px; height:400px; border:solid 1px red; float:left; } #main-center { width:396px; height:400px; border:solid 1px red; float:left; } #main-right { display:none; } } @media screen and (max-width:600px) { #header,#footer { width:300px; } #main { width:300px; height:400px;; } #main-left { display:none; } #main-center { width:300px; height:400px; border:solid 1px red; } #main-right { display:none; } } </style> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div id="header">头部</div> <div id="main"> <div id="main-left">主题-左边</div> <div id="main-center">主题-中间</div> <div id="main-right">主题-右边</div> </div> <div id="footer"></div> </body>
来源：http://www.cnblogs.com/ruanmou/p/4832214.html 的底下一小部分
