仅供学习，转载请注明出处
需求
在前面几个篇章讲解了流体布局、响应式布局、认识em以及rem布局等篇章。
下面来逐步看看京东移动端页面是怎么编写构成的。
首先来看看京东的移动端页面，如下：
只要搜索京东，然后F12设置移动端浏览器显示，刷新一下浏览器就可以看到这个移动端的呈现方式的了。
本篇章不写太多，先来完成整体页面上中下三大部分的布局设置。
注意：微信展示问题
如果将这三个部分直接在body里面编写固定定位，这样下面的那部分会在微信出现无法点击的情况。
那么解决的办法就是写一个最大的div，将这里面的元素全部包裹起来，然后使用绝对定位来处理，这样就可以解决了。
准备初始化文档结构以及CSS\JS
提交码云仓库，关于git相关操作可以访问git和码云的使用。
创建三大部分的布局的git分支 init-layout
首先在我的码云仓库中创建分支，如下：
然后在本地仓库更新一下，并切换分支进行开发。
好了，下面就来开始编写三大部分的代码吧。
截屏京东移动端的页面，放入Photoshop，方便量取尺寸和取色
按照大小100%来截取。
使用Photoshop打开，如下：
正常如果有设计会给一份PSD文件，并且以两倍大小提供，但是因为这是个人创造，就按照一倍大小来处理吧。
设置rem单位计算大小
可以看到，这里我改为了20px，如果为两倍大小，则可以设置为40px。
编写基本HTML结构
编写好了基本html架构之后，然后到index.css中编写样式。
编写最外部div固定定位的样式。
要注意将浏览器屏幕的大小调整为截图一样的大小 468px × 837px
编写header的div样式
编写center_con的div样式
编写fooster的div样式
在开发过程也要适当调整一下大小，截图的部分用来取色比较方便，大小其实就不准确了。
好了，下面就到了比较重要的中间部分。
设置中间部分的内容，提供垂直方向的滚动条，水平方向不要有滚动条。
这个很关键，overflow的应用。
overflow-y: auto;
overflow-x: hidden;
好啦，这样移动端三大部分的布局就完成了。先提交代码，下一个篇章继续。
合并init-layout分支到master分支，并提交代码
首先提交分支代码
$ git add .
$ git commit -m 'init layout'
$ git push
将分支代码合并到master分支并提交
$ git checkout master
$ git merge init-layout
$ git push
该项目的码云仓库地址
https://gitee.com/kubernete/web-jd-mobile/
扫描微信公众号
