先说说效果，现在使用电脑访问我的博客和使用 iPhone、Android、BlackBerry 等手持设备访问我的博客，内容完全一样，但是展现的样子是完全不一样的。
这个改造主要用到了 Media Queries，一个将会被应用越来越广的 CSS 特性。还记得 2007 年的时候我也做过类似的东西，那个时候是用 Javascript 来判断加载不同的样式表文件的，5 年后再来做类似的事情，就变得简单许多了。基本上除了 IE，其他所有现代浏览器都支持这个 Media Queries。浏览器会根据设备的宽度、方向等来套用符合我定义的规则中的样式代码，从而渲染出不同的效果。
然后再配上 meta 标签的 viewport 来进行缩放等的控制，比如比较常用的定义 width = device-width, initial-scale = 1, user-scalable = no，分别表示 viewport 宽度为设备的宽度，默认缩放比例为 100%，用户不可以缩放（比如 iPhone 两个手指张开表示放大，定义 user-scalable = no 后这个手势就不起作用了），这样对网站进行响应式改造时就会简单许多。
这次只是简单改造了一下，对所有的手机都一视同仁，而且也没有针对 iPad 进行特殊处理，iPad 访问时应该和电脑访问时效果是一样的，等过两天要是买 iPad 了再好好想想怎么改吧，哈哈。