前端进阶开发实战教程，使用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="http://img.readke.com/220411/010531M13-2.jpg">< /script> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> < script src="http://img.readke.com/220411/0105312U8-3.jpg">< /script>< link rel="stylesheet" href="http://www.srcmini.com/css/github_responsive.css"> < link rel="stylesheet" href="http://www.srcmini.com/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="http://www.srcmini.com/#">隐私政策< /a> < a class="item" href="http://www.srcmini.com/#">联系我们< /a> < a class="item" href="http://www.srcmini.com/#">API< /a> < a class="item" href="http://www.srcmini.com/#">关于< /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入口。
由于多数都是重复的内容，这里就不打算全部做完了，仅实现一部分。
【前端进阶开发实战教程，使用Flexbox模仿Github项目详情页实现响应式布局详解（二）】最后我们还需要在PC端添加相应的隐藏操作：

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

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

文章图片
五、项目完整源码下载地址github下载地址：https://github.com/onnple/github_responsive
六、结语使用Flexbox布局还是比较方便的，常使用多练习，我们也可以参考bootstrap里面的写法，可以重用一些类。响应式设计本人认为还是比较重要的，以后开发其他项目也是会首选响应式的页面，还是很有必要多去练习，扩展理解更多的内容。
响应式布局实战教程推荐：
前端进阶开发实战教程，使用Bootstrap实现博客平台网站响应式布局详解（一）
前端进阶开发实战教程，使用Flexbox模仿Github项目详情页实现响应式布局详解（二）
如何更容易地快速学会网格布局？响应式网格布局高阶实战：模仿SegmentFault首页（三）