个性化阅读
专注于IT技术分析

如何更容易地快速学会网格布局?响应式网格布局高阶实战:模仿SegmentFault首页(三)

一、引言

CSS网格布局并不难,如何灵活运用网格布局快速开发项目,是每个前端开发者都应该关心的问题。在上一篇中我们看到了Grid布局在页面设计中的使用实例,它的使用实际上非常简单,重在掌握好Grid布局中的轴线方向和对齐方式,你可以在这里找到Grid布局的入门学习教程。

现在我们来实现所有项目都会用到的技术:响应式布局。布局的终极问题恐怕是实现响应式了(和自适应设计),要想设计出更好的界面,响应式布局必不可少。

本教程尝试将CSS网格布局和媒体查询结合实现响应式,选择SegmentFault(https://segmentfault.com/)作为练习对象,因为SegmentFault是典型的响应式网站,有相对多的元素值得我们学习。

二、响应式页面功能需求

首先我们知道响应式布局主要是利用媒体查询实现,媒体查询的实质是调用了不同的CSS布局代码,针对媒体查询,布局代码主要提供两种功能:

1、隐藏或显示不必要或需要的内容;

2、改变布局代码;

隐藏显示内容是最简单的,而且不用过多修改代码,造成调试混乱。而修改布局代码则有可能造成布局混乱,我们应该尽可能少地修改原有的布局代码,通过新增需要的页面内容来达到项目需求。

在这里我们设桌面端的浏览页面为参考对象,即移动端的页面是根据桌面端的页面设计得到的。这样在切换不同平台设计页面的时候,我们就可以知道,哪些内容不需要,哪些内容需要保留,哪些可选。不需要内容一般直接隐藏,可选内容根据需要设计。总的来说,主要是以网页主体内容为中心,对其它内容进行增删改。

以上是对媒体查询的操作的简要说明,下面我们对桌面端和移动端的页面进行分析,主要是以桌面端为参考对象。

1、桌面端页面功能需求

1)顶部导航栏:logo,导航条目、登录,注册

2)左侧栏:为你推荐、近期热门、最新内容、技术频道

3)主体内容:广告轮播、文章主体

4)右侧栏仅做简要填充

2、移动端页面功能需求

1)顶部:搜索、Logo、用户

2)导航:为你推荐、近期热门、最新内容、技术频道

3)主体内容:广告轮播、文章主体

4)底部导航栏:首页、问答、专栏、讲堂

现在你可以通过对比桌面端和移动端的功能需求,找到必须的内容,不需要的内容,以及一些可选的内容,切换到移动页面还需要相应地增加内容。

三、项目开发中使用到的技术和工具

1、使用Grid网格布局作为全局布局;

2、使用CSS的媒体查询实现页面切换;

3、部分控件使用Semantic或Boostrap,如使用Semantic的按钮和搜索框,boostrap的轮播图等;

四、响应式网格布局实现详情

1、桌面端页面设计细节

1)基本设置

新建html文档,在文档头部添加:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

新建两个CSS文件:grid_responsive.css、grid_responsive_phone.css,前者用于默认布局,后者用于移动布局,如下:

<link rel="stylesheet" href="css/grid_responsive.css">
<link rel="stylesheet" href="css/grid_responsive_phone.css" media="screen and (max-width: 767px)">

2)整体布局搭建

HTML代码如下:

<!--顶部导航栏-->
<div class="top">
    <header class="header">
        <div class="begin">
            <a class="item" href="#"><img src="images/dribbble-logo.png"></a>
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">问答</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">专栏</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">讲堂</a>
                </li>
            </ul>
        </div>
        <div class="end">
            <a class="item login" href="#">登录</a>
            <a class="item" href="#">注册</a>
        </div>
    </header>
</div>

<div class="wrapper">
    <!--内容部分-->
    <div class="content">
        <!--左侧栏-->
        <div class="sidebar-left">
            <!--推荐导航-->
            <div class="hot">

            </div>

            <!--技术频道-->
            <div class="channel">

            </div>
        </div>

        <!--主体内容-->
        <div class="main">
            <!--广告轮播图-->
            <div class="ads">

            </div>

            <!--文章主体-->
            <div class="posts">

            </div>
        </div>

        <!--右侧栏-->
        <div class="sidebar-right">
            <div class="recommend-item"></div>
            <div class="recommend-item"></div>
            <div class="recommend-item"></div>
        </div>
    </div>
</div>

CSS布局代码如下:

/*主体容器*/
.wrapper{
    width: 1200px;
    margin: 0 auto;
}


/*顶部导航栏 开始*/
.top{
    width: 100%;
    height: 66px;
    border-bottom: 1px solid #e5e5e5;
}
.top .header{
    width: 1200px;
    margin: 0 auto;
    height: 66px;
    /*background-color: #c6a7ff;*/
}
/*顶部导航栏 结束*/


/*内容部分*/
.wrapper .content{
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(12,1fr); 
}


/*左侧栏 开始*/
.wrapper .sidebar-left{
    grid-column: 1 / span 2;
    padding-right: 15px;
}
.wrapper .sidebar-left .hot{
    height: 104px;
    background-color: #e9ffad;
}
.wrapper .sidebar-left .channel{
    height: 487px;
    background-color: #b5c6ff;
}
/*左侧栏 结束*/


/*主体内容 开始*/
.wrapper .main{
    grid-column: 3 / span 7;
    padding: 0 15px;
    height: 800px;
}

.wrapper .main .ads{
    height: 150px;
    background-color: #ff90ab;
}
.wrapper .main .posts{
    height: 800px;
    background-color: #ffdc8a;
}
/*主体内容 结束*/


/*右侧栏 开始*/
.wrapper .sidebar-right{
    grid-column: 10 / span 12;
    padding-left: 15px;
    display: grid;
    grid-template-rows: repeat(3,auto);
    grid-gap: 30px;
}
.wrapper .sidebar-right .recommend-item{
    height: 352px;
    background-color: #ffa78f;
}
/*右侧栏 结束*/

其中Grid网格布局主要运用在.wrapper .content上,设置grid-template-columns为repeat(12, 1fr),意思是将该布局容器在水平方向上切分成12份。

网格单元格则是使用grid-column,用于设置水平方向的轨道大小,1/span 2表示,该元素占据的区域从第一个轨道到第二个轨道,即水平方向上占据了2个轨道的大小,效果图如下:

整体布局效果

3)顶部导航栏布局

顶部使用网格布局将水平方向切分成三份,使用grid-template-areas设置区域名称,子元素通过grid-area对应所在区域。Grid-template-columns: auto 1fr,意思是第一个单元格元素自适应,再计算之前的单元格元素占据的区域:

.top .header{
    width: 1200px;
    margin: 0 auto;
    height: 66px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    grid-template-areas:
        "begin nav end";
}

效果图如下:

页面顶部导航栏详细布局

4)左侧栏布局设计

该布局没有用到特殊的布局方式,实现使用的是boostrap的导航菜单,效果如下:

侧边栏布局

5) 主体内容设计(轮播图+文章主体)

轮播直接使用bootstrap框架的,文章使用semantic的列表,整体效果如下:

主体文章内容列表设计

2、响应式移动前端设计

终于到重点内容了,首先我们参照上面移动端的需求:

1)把该隐藏的都隐藏了,包括:顶部内容、技术频道、右侧栏,那么剩下的内容就只有推荐导航和主体内容了。

2)调整Grid网格布局,调整热门推荐导航的布局。

3)接着我们需要稍微调整一下文章的图片,初步效果如下:

移动端页面设计初步效果

4)以上,我们已经完成了隐藏和修改的操作了,接下来就是新增内容了,新增内容比修改内容更好。在你新增内容的时候,记得要在对应的桌面端的代码里对其隐藏。下面从头进行内容新增操作。

5)移动页面顶部布局

CSS Grid网格布局代码如下:

.top .header-responsive{
    height: 100%;
    padding: 0 27px;
    display: grid;
    justify-content: space-between;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

另外在推荐频道中添加一项技术频道,效果如下:

频道栏目设计

6)移动端页面底部导航栏设计

该底部导航栏需要使用position布局,将其固定在底部,实际使用中,还需要在向上滑动的时候隐藏,下拉时显示,这里仅做简单展示实现。

五、响应式网页完成效果

桌面端界面:

桌面端效果图

移动端界面:

移动端页面最终效果

六、网站项目源码下载

github下载地址:https://github.com/onnple/grid_responsive

七、结语

认真看下来,响应式和网格布局,是不是其实也没那么难,就是不知道怎么做而已,先理清好项目的需求,一切皆有下文。CSS的媒体查询和Grid布局还值得去深入实践和扩展学习,只要还有网页设计,布局就停不下来。

响应式布局实战教程推荐:

前端进阶开发实战教程,使用Bootstrap实现博客平台网站响应式布局详解(一)

前端进阶开发实战教程,使用Flexbox模仿Github项目详情页实现响应式布局详解(二)

如何更容易地快速学会网格布局?响应式网格布局高阶实战:模仿SegmentFault首页(三)

赞(0) 打赏
未经允许不得转载:srcmini » 如何更容易地快速学会网格布局?响应式网格布局高阶实战:模仿SegmentFault首页(三)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏