响应式布局设计

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

一、什么是响应式？

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

响应式网页设计考虑到多平台、多种屏幕尺寸的情况，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。当你不知道用户使用什么设备，不知道用户的屏幕尺寸时，又想达到较优布局，那么可以采用响应式设计。响应式网页设计就是一个网站能够兼容多个终端。

二、响应式的技术实现？

响应式网页设计由流体布局、媒介查询、弹性图片三种技术实现。

1、流体布局

原特指以百分比为度量单位的布局技术实现方式。在响应式设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。

2、媒介查询

媒体查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，及时的响应布局方案，从而解决之前在单纯的布局设计中遗留的问题。

3、弹性图片

伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。扩大研究范围：除了图片，还应该包括图标、图表、视频等信息内容的响应方式。

三、图例展示

四、响应式的优缺点

优点：

1、面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题

2、开发成本低，门槛低Native APP：Objective-C or Java – 学习成本高Hybrid APP： 外壳+Web APP，需安装。响应式Web APP：HTML5+JS+CSS – 门槛低，极易上手，迭代快

3、跨平台和终端且不需要分配子域虽然可通过监测用户UA来判断用户终端后做跳转，但它还是分配了多个域，而响应式无需监测用户UA没有域的切换，只需根据终端类型来适配不同的功能模块与表现样式，它是跨平台和终端的，1页面适配多终端。
PC – http://qzone.com
Mobile – http://m.qzone.com
响应式：PC & Mobile – http://qzone.com 无需跳转

4、本地存储Web App可以利用本地存储的特性将重要和重复的数据保存在本地，避免页面的重复刷新，减少重要信息在传输过程中被泄露，增量传输修改内容。

缺点：

1、加载需要一定的时间 虽然，它不是一个大问题，在响应式设计中，需要下载一些看起来并不必要的HTML/CSS。除此之外，图片并没有根据设备调整到合适大小，而这正是导致加载时间加倍的原因。
2、优化搜索引擎 对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户，移动用户多采用不同的关键字，修改标题及其他事项都比较困难。
3、时间花费 开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时更多。如果你想要一个响应式网站，最好从草图开始重新设计。**

 

作者信息：
作者系力谱宿云 LeapCloud 团队ux组成员：王涛【原创】
首发地址：https://blog.maxleap.cn/archi...