在10月份的时候@动易设计小吴提到一些响应式布局的网站，在闲暇之余研究了响应式布局在我们工作中的应用；讲到响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果， 设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局：包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通过 Media Query 实现响应布局)。

一、什么是响应式布局?

　　响应式布局是Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

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

二、响应式布局有哪些优点和缺点?

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

缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况（如：无法区分移动终端和PC终端用户）

三、响应式布局该怎么设计?

1、调整分辨率

　　不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不断被研发的各种新设备也将出现新的屏幕尺寸规格。有些设备基于横屏 (portrait)，有些是竖屏(landscape)，甚至还有正方形；对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑，用户还 可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况？

2、弹性化

结合液态网格和液态图片技术

液态网格
#wrap {width:90%; margin:0 auto;}
#content {width:60%;padding:5%;}
#sidebar {width:30%;}
#footer {padding:8% 5%;margin-bottom:10px;}

液态图片
img {width: 100%; }
img {max-width: 100%; }

3、响应式图片

(1)Responsive Images

大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图 片、脚 本和样式表加载请求定向到一个虚拟路径“/rwd-router”。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是 小尺寸的“响应式图片”，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。

(2)css3 image

@media (min-device-width:600px) {
    img[data-src-600px] {content: attr(data-src-600px, url); }
}
当然，第二种方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件等

4、禁用图片自动缩放

在iPhone及部分智能手机中，页面会被自动的同比例缩小至最适合屏幕大小的尺寸，图片同样也会随着整个页面一起被同比例缩小，如右图左侧所示。


将initial-scale的值设定为”1″，即可覆写默认的缩放方式，保持原始的尺寸及比例。

5、布局结构

#wrap {width:90%; margin:0 auto;}
#content {width:60%;padding:5%;}
#sidebar {width:30%;}
#footer {padding:8% 5%;margin-bottom:10px;}

6、Media Queries

常规用法

直接调用一个样式表

@media only screen and (min-width: 600px) {
     .hereIsMyClass {float: right;width: 30%;}
}
CSS3 Media Queries用法

7、显示或隐藏内容

对于响应式布局中经常有用不到的板块，所以我们一定会用到

display: none;

8、JavaScript

对于在IE 浏览器中不支持media query 的情况，我们可以使用Media Query
Javascript 来解决，只需要在页面头部引用css3-mediaqueries.js 即可。示例：
<！--［if lt IE 9］>
mediaqueries.js”>
<！［endif］-->

　　响应式网页设计解决了很多以往很难解决的问题，但我们也须注意到的问题，移动终端打开的速度不太理想，在经后的网络中肯定会应用更广泛。
　　最后分享下我响应式网页设计在我的个人博客中各种效果——演示地址