所谓响应式布局（Responsive
Design），就是让网页针对不同设备的浏览器“响应”
出不同的显示效果，于是抽了点时间把博客做成了响应式布局，适应一下移动浏览器。
响应式布局主要依赖于 CSS3
的媒体查询特性，其原理就是根据浏览器宽度或高度，
适配不同的 CSS，以达到改变页面布局的目的。例如，当浏览器宽度小于 640px
时，
将一些不太必要的元素隐藏，在有限的屏幕上显示更多主要的内容。
例如，如下 CSS
只在浏览器宽度小于或等于 640px（iPhone 的屏幕宽度） 的时候
才会生效：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
@media screen and (max-width:640px) { /* 页面宽度设置为 100% */ body #container { width : 100%; } /* 文章内容区域，宽度设置为 100% */ body #container #content { width : 100%; } /* 隐藏不怎么有用的搜索框 */ body #container #content #header nav form { display : none; } /* 隐藏侧边栏 */ body #container #content #secondary { display : none; }} |
桌面浏览器上的效果：
移动浏览器上的效果：
实际上还有许多细节地方需要适配，但主要原理就是这样。
原文：http://www.cnblogs.com/xupeiyu/p/3593957.html