移动端布局和以前我们学习的PC端有所区别：
1.单独制作移动端页面（主流）
- 流式布局（百分比布局）
- flex弹性布局（强烈推荐）
- less+rem+媒体查询布局
混合布局
2.响应式页面兼容移动端（其次）
- 媒体查询
bootstarp
这也是接下来的课程安排。
案例：京东移动端首页
访问地址：m.jd.com
1. 技术选型
方案：我们采用单独制作移动页面的方案
技术：布局采取流式布局
2. 搭建文件夹的相关结构（和PC端差不多）
3. 设置视口标签以及引入初始化样式和首页样式
<head>
<meta charset="UTF-8">
<!-- 设置视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入CSS初始化文件 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 引入首页的CSS -->
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>4. body常用的初始化样式
body {
/* 根据流式布局，里面的内容宽度基本上是页面宽度的100%,所以body的宽度不用px，直接用百分比 */
/* 宽度和屏幕一样宽 */
width: 100%;
/* 当屏幕宽度在320px和640px之间的时候body是完全按照100%显示的 */
/* 屏幕宽度大于640px或者小于320px则不允许缩放 */
/* 关于min-width，max-width可查阅:m.jd.com检查元素参考官网设置的最大宽度和最小宽度 */
min-width: 320px;
max-width: 640px;
/* 无论屏幕的宽度是多少，body这个盒子在整个界面中是居中对齐的 */
margin: 0 auto;
font-family: -apple-system, Helvetica, sans-serif;
font-size: 14px;
color: #666;
line-height: 1.5;
background: #fff;
}5. 结构的划分
2号盒子用的是固定定位，向上滑动的时候，1号盒子会消失，但是2号盒子会保留在最顶端。
下次看第16节