响应式Web设计操作步骤有哪些

1、 响应式Web设计的第一步就和美工（设计师）确定设计图的尺寸，这里以320、720、1080三种尺寸为基准。

2、响应式Web设计第二步就是开始切图，使用PS为最佳，FW为次。

3、响应式Web设计第三步确定断点，这里是320-720、720-1080、>1080，将整个屏幕大小分成三个区段，小于320的不予考虑。

4、以1080的设计稿为基准，新建样式文件index1080.css、res320.css、res720.css<link href="css/index1080.css" rel="stylesheet" type="text/css"><link href="css/res320.css" rel="stylesheet" type="text/css" media="screen and (min-width:320px) and (max-width:639px)"><link href="css/res640.css" rel="stylesheet" type="text/css" media="screen and (min-width:640px) and (max-width:1079px)">

5、 使用浏览器自带的测试工具或是专门的在线测试平台进行测试，确定不同屏幕分辨率的适配。

6、 响应式网站一般是移动平台的响应式网站，全平台的响应式不多。在移动端，使用HTML5+CSS3可以简化开发。

7、 响应式设计性能的问题需要注意，最主要的响应式图片的处理。 现在智能手机的浏览器常常会被重定窕掷烙宴向到专门的移动站点，这些站点的内容和视觉设计显然是经过删减的，并被称为mdot（因为许多针对手机的站点的网址都使用的是“m.”开头的子域名，所以才会称之为mdot）站点。 下载更少的图片、脚本和样式表……这些转变使得网站能更快加载。原因显而易见——下载更少的字节以及发起更少的请求肯定比原来要快，但是响应式网站的设计却没有遵从这个模式。

8、 matchMedia()是Javascript内部自带的方法，你可以将CSS媒介查询作为参数传递给它，它会返回相关媒毽爸程风介查询是否匹配的信息。 具体来说，函数会返回一个MediaQueryList对象，该对象具有两个属性：matches和media。matches属性的值可以是true（如果媒介查询匹配）或者false（如果媒介查询不匹配）。 media属性的值就是你所传递的参数，例如： windows.matchMedia(“(min-width:200px)”) media属性将会返回”(min-width:200px)”。支持matchMedia()方法的浏览器有：chrome、Safari5.1+、Firefox9、Android3+以及iOS5+。Paul Irish为那些不支持该方法的浏览器创建了一个方便使用的polyfill。