响应式布局【1】----基础知识

本篇文章主要解决：什么是响应式布局？有什么优点和缺点？响应式布局的一些特点等。

一什么是响应式布局？

伊桑·马科特（Ethan Marcotte）在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体查询）进行了整合，命名为响应式网页设计。

简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

这个概念是为解决移动互联网浏览而诞生的。由于移动互联网的不断兴起，越来越多的用户更青睐于一个可以在不同设备上给访客提供一致浏览体验的网站，而响应式设计正好可以做到这一点。

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

响应式最大的特征就是网页可以自动切换屏幕分辨率、图片尺寸及相关的脚本功能，以完美适应不同尺寸的设备，也就是说，一次建站可以满足多个终端的需求。

描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。

二响应式界面的四个层次

1、同一页面在不同大小和比例上看起来都应该是舒适的；

2、同一页面在不同分辨率上看起来都应该是合理的；

3、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；

4、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

三响应式布局优点

下图比较清楚的给出了响应式布局的优点：

说明：

上边搜素引擎优化是指：对于那些想要获得更好的 SEO 排名的用户来说，响应式网页设计也很有帮助，因为网站在所有平台和设备上都提供了一个唯一的 URL。在这个行业里有很多成功的案例，大多数公司在用户研究报告中提到他们的网站的移动点击量增加了 50%，自从他们用响应式的网页设计改进了他们的网站。

四响应式布局的缺点

有如下几个方面缺点：

兼容各种设备工作量大，效率低下；
代码累赘，会出现隐藏无用的元素，加载时间加长；
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果；
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

五响应式界面的基本规则：

1、可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面

2、可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数

3、适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化

4、能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用

5、能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏

6、能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断

7、放弃使用像素作为尺寸单位：用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求提供的图片应该比预想的更大，才能适应高分辨率的屏幕。否则，就会像我的Photoshop一样出现一下这种情况：【注：这块是引用别人的，还没太搞明白，等搞明白了再更新】

六几种不同布局在线体验

1.在http://www.liquidapsive.com/这个网站页面右上角有个下拉列表，选项分别是：

static 静态布局；
fluid 流式布局；
adaptive 自适应布局；
responsive 响应式布局；

你在这几个选项之间切换，然后缩放浏览器宽度，查看不同布局的效果。你会发现，响应式，算是综合了流式和自适应。

2.Ethan Marcotte也模拟建立了一个简单的响应式web的示范网站，可以改变浏览器尺寸体验下：

https://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

七 RWD和AWD

除了响应式web设计，自适应web设计（Adaptive Web Design）的应用也非常广泛。如果搜索自适应web设计，很可能将出现下面的文字：

响应式网页设计（Responsive web design，通常缩写为RWD），或称自适应网页设计、回应式网页设计、对应式网页设计。

实际上，响应式web设计和自适应web设计是有一定区别的，其中最根本的差别是：自适应web设计是网页内容根据设备的不同而进行“适应”，响应式web设计则是网页的布局针对屏幕大小的尺寸而进行响应。响应式web在网页上并不会自动为用户隐藏图片或简化菜单，而是将原本网页上所有的内容原封不动地进行展示，但是手机端上的排版则会自动进行优化从而方便用户阅读、浏览以及使用该网页。