1、1.新建网页文件HTML以及样式文件CSS
打开Dreamweaver CS6，新建一个网页文件：响应式html，以及对应的css，并连接到css文件。
如图：
2、2.整体布局
在css文件中，第一段样式代码输入
body{
padding: 0;
margin: 0;
}
如图：
3、3.输入要显示的内容
在网页文件内输入如图所示内容和标签div。
如图：
4、4.css布局
如图，对标签使用不同的宽度控制代码，进行布局控制。
/* PC或中大型笔记本设备 desktop */
@media all and (min-width: 1201px) {
.title-desktop{
display: block !important;
}
.container {
width: 1100px;
}
}
/* 中小型笔记本或大平板 laptop */
@media all and (min-width: 980px) and (max-width: 1200px) {
.title-laptop{
display: block !important;
}
.container {
width: 920px;
}
}
/* 中型平板或小型笔记本 tablet */
@media all and (min-width: 768px) and (max-width: 979px) {
.title-tablet{
display: block !important;
}
.container {
width: 720px;
}
}
/* 手机或小平板 phone */
@media all and (max-width: 767px) {
.title-phone{
display: block !important;
}
.container {
width: 90%;
}
}
如图：
5、5.浏览网页，测试效果
在浏览器打开网页文件，并调整浏览器的宽度，测试效果。
如图：
