响应式布局（实例一）
第一步，最基本的布局-固定布局(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; /*去除浮动*/ } }
最终的响应效果：（成为了一栏的效果，方便我们阅读滴呀）
这只是一个简单的实例，后面我们再总结。