<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒介查询</title> <style> *{ margin:0; padding:0; } #container{ width:100%; height: 500px; background: pink; } /* 小于500px*/ @media only screen and (max-500px ) { /*小于500时布局的样式控制开始*/ #a,#b,#c{ float:none; } #a{ background: red; width:100%; height: 500px; } #b{ background: yellow; width:100%; height: 500px; } #c{ width:100%; height: 500px; background: blue; } /*小于500时布局的样式控制结束*/ } /* 大于500px*/ @media only screen and (min-500px ) { /*小于500时布局的样式控制开始*/ #a,#b,#c{ float:left; } #a{ background: red; width:33.3%; height: 500px; } #b{ background: yellow; width:33.3%; height: 500px; } #c{ width:33.3%; height: 500px; background: blue; } /*小于500时布局的样式控制结束*/ } </style> </head> <body> <div id="container"> <div id="a">我是第一块</div> <div id="b">我是第二块</div> <div id="c">我是第三块</div> </div> </body> </html> <!-- http://www.jb51.net/css/475563.html css3 media 响应式布局实例 -->