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

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

一、引言

这次我们来实现一下响应式的Github项目页,Github项目页不是响应式,仅是自适应,可能是PC端和移动端两边的数据需求差别大,干脆服务器自适应就是了。

我们选择使用响应式设计Github项目页的理由是,以ReadMe文件描述为页面主要内容,其它内容自动适应设备屏幕。

项目实现中使用的主要布局是Flexbox,这个布局我们平时算是使用多了,也比较好用。项目组件主要使用了Semantic框架,我们自己就不详细重新设计组件了,另外,虽然ReadMe文件描述是页面的主要内容,但是我们不需要去详细设计里面的内容,里面的内容是富文本,使用Markdown编写的。

二、页面结构和技术分析

我们需要分别对PC端和移动端的页面进行分析,这里参考bootstrap的github页面:https://github.com/twbs/bootstrap,首先我们先来分析一下PC端的页面:

web设计页面分析

页面整体内容由上而下,可分为:

1、顶部导航栏:内容左右对齐;

2、 项目信息栏:头部标题栏,项目描述栏,标签栏;

3、项目内容栏:包括头部信息栏,内容操作栏,具体内容列表。

4、ReadMe项目详细介绍;

5、底部页脚。

复杂的组件我们会用到semantic,我们只需要处理好布局和对齐方式,PC端的内容基本左对齐,部分左右对齐,这些都是页面的基本对齐方式了。

下面我们看一下移动端的页面结构:

移动端WEB页面分析

1、顶部导航栏:导航栏又分为上下两部分:标题栏,项目信息记录栏;

2、项目描述信息;

3、项目标签栏;

4、Star数;

5、项目浏览入口;

6、ReadMe详细描述;

7、Releases;

8、Issues;

9、Pull Requests;

10、页脚。

是不是觉得移动端内容比PC端还多?不是这样的,我们这样分主要是使用使用Flexbox布局,实现的时候由上而下,一目了然。

对比PC端和移动端的需求元素,以PC端页面内容为基础,切换到移动端只保留主体内容ReadMe和页脚、项目描述信息和标签栏。

三、PC端页面设计实现详情

首先在文档头部<head>标签添加:

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

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

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

1、定位全局内容

按照上面的大纲我们可以得到相应的html标签结构,以及简单设置一下CSS样式,得到如下结构:

<!--顶部导航栏-->
<div class="wrapper navigation">
    <div class="container">

    </div>
</div>

<!--项目信息头部-->
<div class="wrapper header">
    <div class="container">

    </div>
</div>

<!--项目主体-->
<div class="wrapper body">
    <div class="container">
        <!--描述栏-->
        <div class="description">
            <p>The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. https://getbootstrap.com</p>
        </div>

        <!--标签栏-->
        <div class="tags">
            <div class="ui label">css</div>
            <div class="ui label">bootstrap</div>
            <div class="ui label">javascript</div>
            <div class="ui label">html</div>
        </div>

        <!--项目头部栏-->
        <div class="header">

        </div>

        <!--项目内容操作栏-->
        <div class="operation">

        </div>

        <!--项目内容列表-->
        <div class="list">
            <div class="header">

            </div>
        </div>

        <!--ReadMe-->
        <div class="readme">
            <div class="header">

            </div>
        </div>

        <!--页脚-->
        <footer class="footer flex-normal">
            <span class="item">© 2019 GitHub, Inc.</span>
            <a class="item" href="#">隐私政策</a>
            <a class="item" href="#">联系我们</a>
            <a class="item" href="#">API</a>
            <a class="item" href="#">关于</a>
        </footer>
    </div>
</div>

效果如下:

页面初步效果

正确地定位好主要内容结构是成功的一半,这需要多练习,有错误也没关系,改多几次对于定位内容就有经验了。

2、设计顶部头部导航栏

顶部导航栏使用Flexbox行布局,对齐方式justify-content为space-between:

.flex-between{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

这里写作一个全局类,因为后面还有几个都有类似的布局对齐方式,可以重用这个类。

组件内容包括下拉菜单,搜索框,按钮,这三个均使用semantic的组件。该搜索框功能非常强大,提供搜索智能下拉提示的样式设置,有兴趣的朋友可以研究一下。

搜索框:

<div class="ui search inverted">
    <div class="ui icon input">
        <input class="prompt" type="text" placeholder="Bootstrap">
        <i class="search icon"></i>
    </div>
    <div class="results"></div>
</div>

Semantic的下拉菜单需要添加js:

$(function () {
    $('.main .navigation .ui.dropdown')
        .dropdown({
            on: "hover",
            transition: "none"
        });
});

这样就基本排好元素了,剩下的就是仔细调整组件的样式了,顶部导航效果如下:

web页面顶部效果图

3、设计项目头部信息,描述和标签栏

这里基本没有用到Flexbox,但是也可以用,比如标题这一行,以及右边的控件,同样可以使用justify-content: space-between来对齐。效果如下:

页面内容头部

4、设计项目头部,操作栏,以及项目内容列表

提交和分支数这一行我们可以采用Flexbox布局,将子元素属性Flex-grow设置为1,平分容器宽度。

下面操作栏一行,同样是使用Flexbox,然后设置justify-content: space-between。上面有全局的flex-between可以用,所以我们几不用再重写了。

项目文件列表github使用的是table,这里简单起见只使用了semantic的列表做展示。

下面的readme基本没什么需要设计的。

到此,PC端界面就基本完成了,效果如下:

PC端页面网站效果

四、移动端页面设计详情

1、隐藏组件

第一件事就是感觉把不必要的内容都隐藏掉,由于操作太多,我们可以写一个全局类:

.hidden-xs{
    display: none!important;
}

保留的内容是ReaMe和页脚,描述信息和标签栏,其它的全部隐藏。然后我们再把原先设置的内容980px的宽度改为屏幕宽度:

.container{
    width: 100%;
    padding: 0 15px;
}

这时切换到移动端屏幕尺寸,得到如下效果:

移动端页面初步效果图

2、增加移动端内容

增加的内容包括顶部导航栏,Star,项目浏览入口,Releases列表,Issues列表,Pull Requests入口。

由于多数都是重复的内容,这里就不打算全部做完了,仅实现一部分。

最后我们还需要在PC端添加相应的隐藏操作:

.hidden-md{
    display: none!important;
}

现在你就可以在PC端和移动端切换了,看看移动端的效果:

移动端完整页面效果

五、项目完整源码立即吃瓜

github立即吃瓜:https://github.com/onnple/github_responsive

六、结语

使用Flexbox布局还是比较方便的,常使用多练习,我们也可以参考bootstrap里面的写法,可以重用一些类。响应式设计本人认为还是比较重要的,以后开发其他项目也是会首选响应式的页面,还是很有必要多去练习,扩展理解更多的内容。

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

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

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

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

赞(0)
未经允许不得转载:srcmini » 前端进阶开发实战教程,使用Flexbox模仿Github项目详情页实现响应式布局详解(二)

评论 抢沙发

评论前必须登录!