响应式布局设计

响应式布局能够为不一样终端的用户提供更加温馨的界面和更好的用户体验，并且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着愈来愈多的设计师采用这个技术，咱们不只看到不少的创新，还看到了一些成形的模式。

1、什么是响应式？

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

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

2、响应式的技术实现？

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

一、流体布局

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

二、媒介查询

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

三、弹性图片

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

3、图例展现

4、响应式的优缺点

优势：

一、面对不一样分辨率设备灵活性强可以快捷解决多设备显示适应问题

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

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

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

缺点：

一、加载须要必定的时间 虽然，它不是一个大问题，在响应式设计中，须要下载一些看起来并没必要要的HTML/CSS。除此以外，图片并无根据设备调整到合适大小，而这正是致使加载时间加倍的缘由。
二、优化搜索引擎 对于响应式Web设计，为搜索引擎肯定关键字不是一件容易的事。由于相比通常桌面用户，移动用户多采用不一样的关键字，修改标题及其余事项都比较困难。
三、时间花费 开发响应式网站是一项耗时的工做。若是你计划把一个现有网站转化成响应式网站，可能耗时更多。若是你想要一个响应式网站，最好从草图开始从新设计。**

 

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