有人说H5就是拿来做移动端的，毕竟只做pc端的话，H4就足够了。
于是今天就来讲讲这个移动端——的布局方面。
移动端布局最为麻烦的就是兼容了，二移动端开发的目的也就是为了兼容各式各样的设备仪器。兼容的方式有多种，这里主要讲响应式布局。
响应式布局，即，页面的内容，会根据设备的分辨率，型号等参数自行调整其内容。例如，pc端的百度，我们可以看到大大的空白和中间的搜索条，但是使用f12切换成手机模式，就会发现搜索条底下会多出好多东西，这就是因为页面响应的结果。
和一般的pc布局中，使用px作为计量单位不同，移动端使用的单位是rem，换算公式是——
手机在iphone6下得到的px数据a/(23.4375*2)=最终结果b rem
即 a/(23.4375*2)=b
标准大部分都是这么来的，上面的2代表iphone6的分辨率是普通机种的两倍，这个需要注意。
rem是相对于根元素的font-size进行大小改变的，不会因为页面元素的变化而变化（其23.4375是一个固定的值，除非你在根元素那里重新设定）。
<style>
.normal {
font-size: .5rem;
}
p {
font-size: 12px;
padding: 2rem;
}
.box {
margin-left: 0.47rem;
5rem;
height: 5rem;
background: red;
}
</style>
<link rel="stylesheet" href="index.css">
<script src="rem.js"></script>
</head>
<body>
<div class="box">
</div>
<div class="normal">
//移动端 核心核心单位rem
移动端开发 目的很简单 兼容所有机型
3种单位： px em rem %
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="imgclassName">
</div>
以上就是一个px和rem的效果对比，可以看到，随着浏览器窗口的变化，第一段文字的大小和图片发生了改变，而第二段的英文没有改变。
单位讲完了就是布局，布局使用css3提供的flex。即，弹性盒来布局。
建立弹性盒需要两个部分，一些需要布局的元素和包裹了他们的一个大的容器。
容器的css中需要申明｛
display: -webkit-flex;
display: flex;
｝
元素中则可以根据需求随意设置，例如：
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
当空间足够的时候，元素是200px，当空间不太够的时候，它会缩小，但是极限是100px
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
取消弹性盒，保证无论如何这个元素都会是200px大小。【因为弹性盒有一个特性是元素绝对不可能超过容器】。
.flex1 {
-webkit-flex: 1;
flex: 1;
}
表示这个元素所占的空间份额是1，配合其他元素，例如2，1，3，那么这四个元素如果排成一排，这个元素占有的宽度就是
1/（1+2+1+3）=1/7的容器宽度。
.flex2 {
-webkit-flex: 2;
flex: 2;
}
同上。