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

响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。

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

响应式设计性能的问题需要注意，最主要的响应式图片的处理。

现在智能手机的浏览器常常会被重定向到专门的移动站点，这些站点的内容和视觉设计显然是经过删减的，并被称为mdot（因为许多针对手机的站点的网址都使用的是“m.”开头的子域名，所以才会称之为mdot）站点。

下载更少的图片、脚本和样式表……这些转变使得网站能更快加载。原因显而易见——下载更少的字节以及发起更少的请求肯定比原来要快，但是响应式网站的设计却没有遵从这个模式。

除了使用媒体查询外，也可以使用Javascript来控制。

matchMedia()是Javascript内部自带的方法，你可以将CSS媒介查询作为参数传递给它，它会返回相关媒介查询是否匹配的信息。

步骤1

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

步骤2

PS

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

Fireworks cs6

步骤3

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

步骤4

引入样式文件

以1080的设计稿为基准，新建样式文件index1080.css、res320.css、res720.css

步骤5

百度测试平台

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

步骤6

HTML5

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

步骤7

响应式设计性能的问题需要注意，最主要的响应式图片的处理。

现在智能手机的浏览器常常会被重定向到专门的移动站点，这些站点的内容和视觉设计显然是经过删减的，并被称为mdot（因为许多针对手机的站点的网址都使用的是“m.”开头的子域名，所以才会称之为mdot）站点。

下载更少的图片、脚本和样式表，这些转变使得网站能更快加载。原因显而易见——下载更少的字节以及发起更少的请求肯定比原来要快，但是响应式网站的设计却没有遵从这个模式。

步骤8

响应式Javascript

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。

【注意事项】

（1）响应式设计需要考虑网站的性能问题（2）响应式Web设计需要慎重选择断点