响应式设计是目前web前端领域最前沿的设计理念，已经在各大互联网、进行了应用，取得了不错的效果。 本经验将分享响应式web设计的流程，让新手快速入门！
工具/原料
1
笔记本电脑或是台式机
2
互联网
3
设计神器Photoshop CS6（PS）
4
切图神器Firework CS6（FW）
5
网页神器Dreamweaver CS6（DW ）
6
主流浏览器（谷歌浏览器等）
7
移动设备（测试用）
8
目前最流行的HTML5
9
炫丽效果制作师CSS3
10
跨平台编程语言Javascript
方法/步骤
1
首先，明确响应式网站是全平台的响应式还是仅在移动平台做响应式适配，一般而言，响应式设计主要用在移动平台用来适配琳琅满目的移动设备屏幕分辨率。
3
当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。
4
使用网页神器Dreamweaver CS6（DW ）新建一个HTML5页面
5
该首页面的HTML5基本结构如下图所示，
6
这里设置断点，【320,639】、【640,1079】以及大于等于1080或是小于320合用一套样式。共3套样式，其他一套为基本样式。
7
引入 Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
8
不同屏幕分辨率访问区间的样式要分别举行优化，现在一般使用Javascript控制根元素字体大小的方式，其Javascript代码如下。
9
响应式网站要一边测试一边进行，随时查看在不同分辨率下的适配情况。现在，一般主流浏览器都有查看响应式视图的功能。
10
虽然，各大主流浏览器已经自带有响应式视图，但是最好还是使用真机测试一下最为稳妥。
注意事项
1
最好先要Javascript程序检测设备对媒体查询的支持力度
2
响应式设计也不是万能的，要做好百分之百复原各种屏幕分辨率下的设计师不可能的
上一篇：好好经营你的35-55岁