现在人们上网不只是像以前传统的在电脑上，而是随时随地的移动互联时代，那么移动端就孕育而生了 。手机、笔记本电脑、平板电脑。传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。

一、  什么是响应式

响应式布局是EthanMarcotte在2010年5月份提出的一个概念，响应式设计就是在网站开发过程中根据用户操作以及设备的环境进行相应的操作和布局，让网站针对不同系统平台、屏幕尺寸、屏幕定向等进行智能化调整，进行相对应的布局，如在pc端、iphone、Android、ipad，实现了在智能手机和平板电脑等多种智能移动终端浏览效果的流畅，防止页面变形，能够使页面自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备，并可在任一浏览终端进行网站数据的同步更新，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

二、  响应式优缺点

优点：

1）户体验友好

随着电脑尺寸多元化，智能设备（pad/智能手机）普及化，在当下追求用户体验至上的时代（2016年），之前网站普遍使用固定的宽度（960px）逐渐满足不了现在不同设备与不同分辨率需求。在高分辨率电脑宽屏显示器上，两边留白过多。在手机上显示，内容显示过小，用户为了看清楚，首先需要放大界面，再左右拖拖界面。响应式网站可以根据不同终端、不同尺寸和不同应用环境，自动调整界面布局、展示内容、内容大小，提供非常好视觉展示效果，一致性友好体验。 

2）省设计开发成本

相对需要开发电脑网站、pad网站、手机网站来说，响应式网站式节省设计开发成本的。从设计角度说，一般来说，响应式网站界面只需要设计两套设计效果图就行了，电脑端与pad端基本可以共用一套设计效果图，手机端重新设计一套就可以了；从前端开发角度说，再不需要开发三套完成不一样的前端代码，只需要根据临界点（如果是基于Bootstrap前端框架进行开发，它上面有明确说明，这个问题下回再和大家分享）为不同终端开发三套不同的css样式；从后期维护角度来说，再不需要分别维护pc界面、pad界面、移动界面，专心维护一个网站即可。

3）EO友好

由于响应网站在不同终端有友好的界面展示效果，用户可以与网站一直保持联系，比如URL不变积累分享；通过单一的URL地址收集所有的社交分享链接最佳化搜索用引擎。搜索引擎也在变得越来越聪明，它们足够智能可以完成移动网站和桌面网站的连接。Google也建议优先采用响应式设计，因为无论是什么网页版本都是相同的HTML、相同的内容，Google最容易处理。

缺点：

1）IE老板兼容性不友好

对于老版本IE（IE6、IE7、IE8）支持不好，这是一个致命的问题，如果你的网站用户大多还采用老版本IE的话，建议不做响应式网页设计。

2：灵活性有所欠缺

基于不同终端的设备属性不同，对产品用户体验要求就会截然不同。内容比较多带有功能性的网站不适合做响应式网站设计，如：电商类型网站，宽屏的pc端内容如果全部要在手机端进行展示，势必导致手机端的界面非常长，需要根据手机端属性进行重新信息框架设计，这样对响应网站要求非常高，实现难度与成本非常高。但是大型网站为了提高用户体验，通常做法，把高分辨率宽屏网站最小的响应尺寸响应到1024px，不再适配手机端，手机端重新设计开发一套手机网站，简单理解为2.5响应，如：电商网站亚马逊、Calvin Klein、Nike、视频网站Youtube，等。

3：速度可能会变慢

由于响应式页面是同时下载多套CSS样式代码，可能在手机上就下载PC、Pad的冗余代码，导致文件变大，影响加载速度。不过CSS样式的代码占用内存相对图片来说不算大，所以如果前端编程处理得好前提之下，这就不会影响网站加载速度。

三、  布局实现

许多网站为实现响应式设计，有各自的不同做法，主要可以归结为以下3种方式： 1）多个固定尺寸切换的响应方式 2）为移动端、桌面端分别打造两套区间尺寸的响应方式 3）跨终端无缝体验的响应方式

1.多个固定尺寸切换的响应方式：基于核心用户的主流设备，选择典型的分辨率，分别设计出几个尺寸版本，投射到相应的设备中去。

2.为移动端、桌面端分别打造两套区间尺寸的响应方式：通过综合评估网站用户设备的终端类型、屏幕尺寸、网站定位，以及不同终端环境的用户使用特性，分别为移动端和桌面端打造两套独立页面，它可以实现所有用户设备屏幕尺寸中的部分区间段的理想体验覆盖。

3.跨终端无缝体验的响应方式：从小屏手机到大屏电脑所有用户设备全尺寸区间覆盖的一套完整页面系统，能兼顾不同类型终端的交互行为差异，带来跨终端设备的用户体验一致性。

四、  基本响应式

利用CSS中的Media Query来开发响应式布局的前端框架，语法结构及用法：
@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

判断设备横竖屏：
/* 这是匹配横屏的状态，横屏时的css代码 */
@media all and (orientation :landscape){} 
/* 这是匹配竖屏的状态，竖屏时的css代码 */
@media all and (orientation :portrait){}

判断设备宽高
@media only screen and (max/min-width/height: 960px) { /* 样式定义 */ }

示例一：在link中使用@media：
<link rel=“stylesheet” type=“text/css” media=“onlyscreen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

示例二：在样式表中内嵌@media：
@media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {srules}
在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。
从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。
only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

五、  总结：

虽然网站响应式设计可以在不同终端提供完美展示效果与友好的用户体验，但是在实际开发中，还是要更具具体的网站需要来确定是否采用响应式布局，比如企业官网、单页宣传网站非常适合做响应式网站设计，由于它们的界面内容比较少，结构比较简单，所以在不同终端、不同尺寸设备上进行网站信息框架调整、内容加减、图片、文字、栅格响应比较容易。内容比较多带有功能性的网站不适合做响应式网站设计，如：电商类型网站。但是随着科技不断发展，响应技术逐渐完善，给响应式设计提供强有力的技术支持；吻合用户体验至上的趋势。所以说，响应式设计必定是未来发展趋势。