最近在整理一些自己的DEMO...发现有些DEMO因为太久了，自己都忘记了。所以还是贴出来吧，既是分享也是便于自己查看。
随着手机越来越智能、平板电脑越来越主流，移动终端大赶超传统PC只是时间的问题。可随时而来的问题就是，移动终端由于为了适合各种人群和需求，往往屏幕的尺寸层出不穷。这就导致很多网站看起来不伦不类，在PC上看明明很好，但一到小屏幕的移动端，就完全变形或者呈现效果不佳。为此，一些网站往往根据不同的屏幕分辨率，制作不同样式的页面，但这样就大大增加了成本。
科技是与时俱进的，技术也是与时俱进的，所以老外就想到了“响应式Web设计(Responsive Web Design)”。其概念就是根据不同的设备，不同的屏幕进行响应，调用最符合当前用户的一个网页风格。（其实我的网站很早以前就应用了响应式web设计，不过仅仅针对小于1240的屏幕做了“一个”窄版的风格，可能没什么人会注意到此细节。）
另外相对应的优势也十分明显：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。 兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。 操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。
响应式Web设计实现起来并不难，最难的是如何始终呈保持良好的用户体验性和页面结构的通用性，这就非常考验设计人员和开发人员的思路。页面的制作方面和传统HTML几乎没有任何差别，最主要的就是下面2段代码，我相信你很容易就能理解：
HTML CODE:
<!-- 下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS CODE:
/*
iPhone横屏时的宽是480像素。
@media screen and (max-width: 480px) 代表最大宽度，也就是说当用户(设备)屏幕尺寸小于480像素时，调用如下样式。
另外，默认情况下，iPhone会将过小的字号放大，所以我们通过设置属性-webkit-text-size-adjust，禁用html节点的字号自动调整。
*/
@media screen and (max-width: 480px) {
.post-image{ width:99%;}
#site-title{ font-size:45px;}
#main-nav li{ float:none;}
html { -webkit-text-size-adjust: none;}
}
好了，大家看示例吧~ 记得看的时候改变下浏览器窗口大小，支持手机访问。
Demo