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

一、引言

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

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

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

二、页面结构和技术分析

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

页面整体内容由上而下，可分为：

1、顶部导航栏：内容左右对齐；

2、项目信息栏：头部标题栏，项目描述栏，标签栏；

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

4、ReadMe项目详细介绍；

5、底部页脚。

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

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

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"

        });

});

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

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

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

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

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

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

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

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

到此，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里面的写法，可以重用一些类。响应式设计本人认为还是比较重要的，以后开发其他项目也是会首选响应式的页面，还是很有必要多去练习，扩展理解更多的内容。