1、什么是响应式网站设计

概念：伊桑·马科特在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。 简而言之是指网页能自动识别屏幕宽度、并做出相应调整的网页设计。

原理：主要是css根据屏幕宽度，自动调整网页div显示和布局，以适应不同尺寸屏幕优化浏览体验。

价值：随着越来越多的智能移动设备（mobile, tablet device）加入到互联网中来，移动互联网不再是独立的小网络，而是成为了 Internet 的重要组成部分。响应式网页设计（ RWD / AWD）的出现，目的是为移动设备提供更好的体验，并且整合从PC端到的各种屏幕尺寸和分辨率，用技术来使网页适应不同分辨率的屏幕。

响应式设计可以为电脑、、平板等不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，已成为大势所趋。

2、为什么响应式网站重要

因为当下屏幕分辨率不同的设备数量正在增加，从电脑、平板到智能，响应式设计让你的网站在任何设备上都有超赞的体验！48%的移动用户在流量一个没有对移动端优化的网站时感到出挫败和心烦。52%的用户说，如果一个公司的网站在移动设备上的体验很糟糕，就不太想和它打交道了。因为用户、访客在乎，可见响应式网站设计的重要程度！

3、搭建响应式网站的9个理由

作为一种能够缩放适应不同大小的屏幕的网页设计做法，响应式设计(Responsive Design)正日益成为最受推崇的移动网页优化方式。在谷歌公司于2012年中期指出，响应式设计是优化移动网站的最佳方式之后，这种设计做法的地位得到了进一步巩固。

随着iPhone、iPad和Android的普及，网站主办方发现，网站在移动端应当带来与桌面端类似的体验。否则，网站在移动设备上看起来就只有细小的文字和链接，网页布局也会一团糟。这就意味着损失流量和销售额的风险。如果你还对网站是否需要实现响应式设计存在质疑的话，看看下面的网络调查数据，相信你会更加认可网站实现响应式布局的重要性。

    · 85%的用户认为企业的移动站点必须做的能够媲美PC端网页。

    · 移动设备用户的数量将在2014年末超过PC端的用户数量。

    · 72%的用户会同时使用多种设备。（数据整理自互联网，为平均值）

    · 48%的用户称：如果企业的移动网站做的不够好，往往会给人不注重用户的“错觉”。

    · 73%的互联网用户使用作为和互联网互动的主要的或是唯一的设备。

    · 48%的智能机及平板用户表示很少企业会在移动站点的优化工作上下功夫。

    · 据统计目前有16%的网络流量都来自于移动端。

    · 67%的网民表示，更喜欢用在那些用户友好度高的电商网站平台上进行购物。

    · 66%的移动设备用户反应移动网站的加载速度有待提高，响应式设计的普及迫在眉睫。

4、与搜索引擎优化的关系

在搜索引擎（尤其是百度、谷歌）中排名靠前是每个网站的终极目标，具有响应式设计布局的网站有助于达成这个目标，Google已经表明对响应式设计的青睐。在不同的设备上，网站的 URL 和 HTML 都可以保持一致。这些都能简化搜索引擎对网站的爬行、收录和整理，从而改善网站的搜索引擎可见度，有助于搜索引擎的排名，带来更高的曝光度和客户流量。毫无疑问，SEO 营销活动既昂贵又耗时，但响应式网页开发让你集中精力维护管理一个兼容所有设备的网站，从而节省大量时间和资金的投入。

5、响应式网站的制作难点

既然响应式设计已成为大势所趋，为什么国内99.9999%的网站都还不是响应式的？

   1）设计原型多、兼容测试多

    制作前期，需要对用户调研，确定制作多个尺寸线框原型界面，还需要设计师和前端开发人员保持密切的沟通。

   2）视觉设计要求高、细节多

   移动设备的屏幕像素密度与传统电脑屏幕不一样，在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等，都将对设计师有高要求。

   3）前端实现难、跨技术合作

   与传统的web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。

   4）参与人员多、耗费精力大

   因为响应式设计需要对多个界面兼容、功能调试，导致整个制作过程需要UI设计师和前端工程师不断磨合制作。

6、如何搭建响应式网站？

   1）自行组建团队开发

    优点：方便沟通和管理，修改容易

    缺点：响应式设计人才稀缺，团队建设难，耗费高，周期长

   2）外包给第三方专业团队

   优点：现成团队，建设时间较快

   缺点：目前能做好响应式网站的团队还非常少，要价高，修改升级麻烦

   3）使用自助建设平台创建

   优点：模板创建，个性化设置，时间快，费用低

   缺点：不能百分百实现自己的功能要求

总的来说，响应式网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了，它需要更多的人员参与到制作中来，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，开发人员在开发之初就要设计好要适配的屏幕尺寸大小，页面越复杂，要考虑的适配排版问题就越多，而且交互每个阶段该产出什么？交互与视觉如何协作？前端何时介入？哪些事情让后端开发来做更合理？一系列的配合制作难度，导致很多站长望而生却。

从概念上看两者的区别：

响应式布局就是响应式设计方案呈现的效果，具体指页面的布局会根据不同设备的显示面积（主要是宽度）的不同而呈现不同的布局，这个效果比弹性的布局更好的地方是样式会主动地根据用户的设备的显示面积呈现出布局更灵活，可读性更强，当然对研发的要求也会更高（比如说如何更好地让图片、适配、UI动态效果自适应各种布局）。响应式设计一般来说是一套设计方案解决所有的设备的自适应问题。

移动端布局就是传统的固定宽度或者弹性布局的设计方案呈现的效果。一般来说，这个布局设计开发都比较简单，同时设计的效果可以更精细，细节更丰富。不好的地方就是如果要适应很多不同的设备，需要多套设计方案，或者让比较小屏的方案去适应多个大屏，适应的效果上可能不是特别好。

简单来说，响应式布局是为了适配不同的终端而生，移动端布局是针对于智能为主，也就是现在行内常说的H5站（m站）。

来看看他们的不同之处：

1、两者适配的群体不同，响应式适配各种终端，而移端大部分为智能为主。

2、响应式布局能根据不同的终端设备实现不同的页面布局，而移动端布局大部分是单列布局。

3、响应式布局有可能造成冗余的代码较多（当然也有高手前端写出简洁的代码，ABC模板商城的响应式网站模板代码就很简洁、干净、整齐），移动端布局冗余代码较少，针对性较强。

相同之处：

1、在智能上，响应式看到的页面效果能和移动端的一样效果。

2、两者都要面对适配的问题、兼容性问题。

响应式布局与移动端布局各有优缺点，看你怎么取舍了，根据你自己的建站需求来选择适合的方式。