1、1、新建文件
由于响应式设计涉及到相对复杂的css样式代码，所以不再建议使用记事本来编辑。
使用Dreamweaver CS6，新建一个html文件，然后在新建css文件，并做外链。
如图：
2、2、定义通用样式
通用样式，就是不管终端是什么，显示的效果都是一样的，一般用来定义页面背景，全页面设计等。
如图：
3、3、定义PC样式
在样式表中键入以下代码：
/* PC或中大型笔记本设备 desktop */
@media all and (min-width: 1201px)/*这就是大屏显示下的样式文件*/ {.......}
如图：
4、4、定义平板样式
在样式表中键入以下代码：
/* 中小型笔记本或大平板 laptop */
@media all and (min-width: 980px) and (max-width: 1200px) {......}
如图：
5、5、定义手机终端样式
在样式表中键入以下代码：
/* 手机或小平板 phone */
@media all and (max-width: 767px) {......}
如图：
6、6、测试
使用浏览器打开，在极速模式下，调整终端的宽度来检测样式，更容易修改。
如图：
