Hexo主题中响应式布局设计

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

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

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

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

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





如何实现这种布局?先简单看一下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-contentresume-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查看。

Comments
Write a Comment