响应式设计

响应式设计是指页面中的元素、前端代码要根据用户行为及设备环境进行相应的响应和调整。响应式就是不管是PC、笔记本、iPad或手机，页面都能够根据终端自动适应，图片大小及页面布局也会自动调整。响应式设计就是一个页面能够兼容多个终端设备，而不是为每个终端单独设计一个页面。

响应式设计的特征

·适配多设备、多屏幕、多终端。

·流体内容。响应式设计的内容是流动的，会根据屏幕、浏览器窗口大小流动布局展示内容。

·体验的一致性。

优势

技术支持始终是用户体验的先决条件，正是因为技术的发展，才出现了为保持体验一致性的响应式设计；节省设计成本，只需要设计一套效果图；对网站性能和SEO更加友好。

劣势

多终端适配一个页面会带来大量冗余代码，所以在加载和技术成本上要考虑其实用性；页面越复杂，响应式页面开发和维护成本越高，响应式页面性能也越差；由于响应式图片要根据终端和分辨率进行适配，如果网速和图片压缩问题得不到很好的解决，体验就会很差；对设计的要求高，细节要求更加精准，前端实现也很难。

国内响应式设计现状

正是基于响应式设计的优势和劣势，国内的产品和网页极少是多终端适配的，PC端会根据屏幕宽度做2～3种宽度的适配。而且，基本上都是PC端使用一个版本，移动端重新设计一个新的版本，体验完全不同。

多终端的出现是为了满足多场景、多情境下的使用要求，目的是为了提供更好的用户体验。而国内的产品设计内容很多，在移动端和PC端展示时，内容会发生很大变化，会产生冗余代码，图片压缩及技术上的实现也比较复杂。所以没有必要为了做响应式设计而设计，综合考虑，有必要针对PC端、移动端做不同的设计。

版式结构与内容布局关系

一栏式页面相对简单。内容直接根据屏幕大小适配。

两栏式页面结构相对简单，在小屏幕设备上显示时，可以巧妙地转化成一栏式设计。

三栏式页面结构相对复杂，在屏幕较小的情况下，内容会被拉得很长，结构变化也很大。

响应式设计的多种状态

块状内容可自动调整宽度，自动在设定的最小宽度与最大宽度之间跳转，以适应屏幕。

当页面尺寸变动较大时，能够自动减少/增加区块列表，而不会增加高度。

内容块自动适应与页面的边距，页面中的主体内容会根据屏幕宽度调整与屏幕的边距。

图片尺寸比例适应屏幕，图片会等比缩放。

自动隐藏/显示内容，当屏幕宽度/高度变化时，缩略显示主体内容。

自动折叠主功能区域、导航和菜单。

响应式设计的几大要素

1.内容流动。屏幕相当于容器，内容就像容器里面的水，当屏幕变小时，内容就像水一样流动铺满屏幕，达到极佳的展示效果。

2.相对单位。让页面在移动端屏幕和PC端屏幕之间灵活变换的相对单位，肯定不是固定的像素数值。

3.断点。即在页面布局上设置的内容断开位置，代码会根据屏幕宽度判断如何显示内容。例如，PC端的屏幕宽度超过1400px时则显示4栏，小于1000px时则显示3栏。

4.最大值和最小值。如在布局时会设置宽度为100%，内容宽度的最大值为1000px，当屏幕宽度超过1000px时，内容也不会超出1000px显示。最小值也是如此。

5.嵌套。将独立内容打包在一个容器内，然后嵌套进页面。

6.先判断用户的使用场景是移动端优先还是PC端优先，然后为优先的用户使用场景做布局展示设计。

7.位图和矢量图的使用。一般页面中的JPEG、PNG、GIF图片都是位图格式，也能满足绝大多数需求。

8.嵌套字体的使用。系统要加载嵌套字体就会有加载时长，影响浏览速度，如果使用个性化字体，就需要用户安装后才能显示。

响应式设计中的卡片式设计

卡片式设计通过更易理解的内容块来呈现内容信息，同时卡片作为容器可以轻易扩展或者收缩，可以说是响应式设计的极佳选择。

卡片式设计将图片、文本整合到卡片中，将内容打包封装，排版整齐。卡片式设计可以灵活控制卡片的宽度和高度，可以根据屏幕尺寸自由重组。

小结

未来屏幕及终端多样化的趋势只会越来越明显，想要让这些大小千差万别的屏幕呈现统一的视觉效果其实很难，为了解决多终端、多场景、多情境模式下保持用户体验一致的问题，设计师和前端技术人员一直在努力。响应式设计是一门前端技术，它需要设计师和前端技术人员不断地去探索和实践。