1、 首先，打开dreamweaver cs6 ，新建一个html文件。见图：
2、 接着，在body里添加三个主div标签，分别是头部，内容，底部。内容div内又添加三个div,分别是左边，中间，右边。
3、 接下来是最重要的内容了，写css来实现响应式布局。 添加<style>标签，在里面写css。开始是屏幕宽度大于900的时候，即pc端，头部，尾部，内容的css 代码：
4、 当屏幕最小宽度为900px时，其头部尾部，内容以及内容内部包含部分的样式：
5、 当屏幕宽度在600~900px时，其头部尾部，内容以及内容内部包含部分的样式：
6、 最后是当屏幕宽度在600~900px时，其头部尾部，内容以及内容内部包含部分的样式：
7、 大功告成，在浏览器中查看效果，如图。 如果要切换至手机端，可以借助谷歌google chrome浏览器来查看，按f12,点击图上按钮，于是就可以看到简单的响应式布局了。
8、 完整的代码如下：<!doctype html><挢旗扦渌;html><head><meta charset="utf-8"><title>响应式布局</title><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></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></html> 附：本经验关键词：html响应式布局怎么写、响应式布局代码、css实现响应式布局代码、响应式布局设计、响应式布局如何实现、开发响应式布局、响应式布局实现方法、响应式布局