尝试一下响应式布局

所谓响应式布局（Responsive Design），就是让网页针对不同设备的浏览器“响应”

出不同的显示效果，于是抽了点时间把博客做成了响应式布局，适应一下移动浏览器。

响应式布局主要依赖于 CSS3 的媒体查询特性，其原理就是根据浏览器宽度或高度，

适配不同的 CSS，以达到改变页面布局的目的。例如，当浏览器宽度小于 640px 时，

将一些不太必要的元素隐藏，在有限的屏幕上显示更多主要的内容。

例如，如下 CSS 只在浏览器宽度小于或等于 640px（iPhone 的屏幕宽度） 的时候

才会生效：

@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;
        }
}

　　桌面浏览器上的效果：

移动浏览器上的效果：

实际上还有许多细节地方需要适配，但主要原理就是这样。