几乎所有的Hexo主题都是响应式布局的主题，在现在这个多屏的时代，特别是移动互联网时代，一个网站如果没有做成响应式的布局都不好意思拿出来，所以响应式布局非常的重要。

什么是响应式布局？响应式布局就是一套网页样式适应所有的屏幕，站点的内容不变，但是随着屏幕的大小不一样，网页的布局会随之改变。如下图所示。

xys04.jpg

其实我只是刚刚接触响应式布局，因为最近一直在学习前端相关知识，当我接触了它，并且在我的Hexo站点实战后，真是感觉太棒了，页面随着不同的屏幕大小呈现不同的样式。这样就解决了移动客户端访问页面时的尴尬。

响应式布局的最核心的内容应该就是CSS中的媒介查询，通过它可以在一个CSS文件中定制针对不同屏幕的样式， 从而实现了响应式布局。 想要简要了解一下的请查看媒介类型 | w3school。当然要掌握响应式布局可不仅仅只需这么点知识。建议找本书完整的学习一下。

前端时间我在Hexo站点中添加了resume布局，这一页的内容抛弃了原主题light-ch自带的布局及样式，但是随之抛弃就是原本已经设置好的响应式布局文件， 下面通过我对resume页面的改造来了解一下响应式布局的魅力。 主要内容就是要手动添加CSS代码中的媒介查询，使resume页面符合响应式布局。首先看一下最后的效果，如下图：

xys01.jpg

xys02.jpg

xys03.jpg

如何实现这种布局？先简单看一下resume页面的结构：

<div class="resume">
    <div class="resume-left"></div>
    <div class = 'resume-content'>
        <div class="resume-entry">
            <%- page.content %>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

结构很简单，分为resume-left以及resume-content，resume-content里包含文章主要内容resume-entry。实现布局的重点还是要看CSS代码，打开resume.styl文件，查看部分代码如下：

.resume{
    margin: 0 auto;
    width: 800px;
    @media screen and (max-width: 860px){
        width: 100%;
    }
}
.resume-content{
    float: right;
    width: 580px;
    @media screen and (max-width: 860px) {
        width: 100%;
        margin-left: -210px;
    }
    @media screen and (max-width: 500px){
        margin-left: 0;
        float: none;
    }
}
.resume-entry{
    margin: 30px;
    @media screen and (max-width: 860px) {
        margin-left: 200px;
    }   
    @media screen and (max-width: 500px){
        padding-left: 30px;
        margin-left: 0px;
    }

}

简单分析一下这段代码，这里有两个临界点，一个是宽度为860px时，一个是宽度为500px时。那么整个页面就分为3段宽度来分析：

（1）当宽度大于860px时，忽略掉所有@media部分就是它的样式情况；
（2）当宽度在500px到860px之间时，样式就变成了@media screen and (max-width: 860px)这里面规定的代码了；
（3）当宽度小于500px时，样式又替换成了@media screen and (max-width: 500px)里规定的代码了。

原理就是这样，页面比较简单，实现也很简单。学到这里，记载在此。待深入学习后再分享。

上述例子详细代码请点击light-ch | github查看。