几乎所有的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查看。
网友评论