srcmini一、引言
这次我们来实现一下响应式的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里面的写法，可以重用一些类。响应式设计本人认为还是比较重要的，以后开发其他项目也是会首选响应式的页面，还是很有必要多去练习，扩展理解更多的内容。
响应式布局实战教程推荐：
前端进阶开发实战教程，使用Bootstrap实现博客平台网站响应式布局详解（一）
评论前必须登录！
注册