随着网络的快速发展，移动端设备页面也越来越重要。但由于各个手机的屏幕大小不一，那么如何让一个页面匹配各个页面呢。现在我们来看看下面的几种布局方式。
注意我们要想在移动端完美显示效果，需要在head标签内加一个viewport的meta标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
弹性盒模型布局
- 需要在父级开启弹性盒模型：display:-webkit-box;
- 自己设置需要的大小(份数)：-webkit-box-flex:1;（份数/总份数）
- 如果有固定宽度(设置好的px宽度)，先剔除掉固定的宽度再按照份数划分
- 注意 不要用浮动和定位
我们先简单的用一下：
<div id="box">
<div style="background:red">left</div>
<div style="background:green">center</div>
<div style="background:blue">right</div>
</div>
CSS样式开启弹性盒模型，并设置子级的宽度
#box{ display:-webkit-box;}
#box div{
/* 当然了这里我们也可根据具体需求设置我们所需的大小 */
-webkit-box-flex:1;
height:300px;
}
效果如下：
- 设置子级div竖直排列（每个占一行，高度分割）：-webkit-box-orient: vertical;要给父级加哦
- 将子级div进行倒序排列：-webkit-box-direction: reverse;要给父级加哦
<div id="box">
<div style="background: red;">1</div>
<div style="background: yellow;">2</div>
<div style="background: blue;">3</div>
<div style="background: green;">4</div>
</div>
在CSS中设置子级div所占份数，并竖直倒序排列
html,body{
height:100%;
overflow: hidden;
}
#box{
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
height:100%;
font-size:100px;
text-align: center;
color: #fff;
}
#box div{ -webkit-box-flex:1;}
效果如下：
接下来我们，回到一个老问题让未知宽高的div，在父级内垂直水平居中呢？这里我们加深点难度让一组未知宽高的div在父级内垂直水平居中。
我们不得不说的是弹性盒模型里正好有此属性
- 让子级元素垂直方向居中：-webkit-box-align: center;要给父级加哦
- 让子级元素水平方向居中：-webkit-box-pack: center;要给父级加哦
<div id="box">
<div class="div1" style="background-color: lawngreen">div1</div>
<div class="div2" style="background-color: red">div2</div>
</div>
在父级元素下设置弹性盒模型和相关样式
#box{
display: -webkit-box;
width: 300px;height: 300px;
border: 1px solid #000;
margin: 100px auto;
/* 子级水平居中 */
-webkit-box-pack: center;
/* 子级垂直居中 */
-webkit-box-align: center;
}
#box div{ width: 100px;height: 100px;}
效果如下：
流体式布局
基本思想就是：用100%来时div与父级的宽度一致并与浮动一起（width:100%+float）；
缺点：每一个设备上最终的显示效果都与设计图有出入。不完美
例(iphone4屏幕)：
<div id="wrap">
[站外图片上传中……(1)]
</div>
设置css样式
*{margin: 0;padding: 0}
#wrap { width: 100%;}
#wrap img{ width: 100%;}
效果如下：
针对流体式布局的缺点有改进方式，就是设置一下min-width与max-width的值（某东用的）。但依然有缺点，就是让屏幕宽度大于max-width时，两侧会有留白
例：
<div id="wrap">
[站外图片上传中……(2)]
</div>
设置css样式
*{margin: 0;padding: 0}
#wrap {
width: 100%;
min-width:320px;
max-width:640px;
}
#wrap img{ width: 100%;}
效果如下：
响应式布局
基本思想就是：利用媒体查询(@media)设置针对不同尺寸的设备展现不同的效果。用一套css兼容所有设备
注意写条件的时候，从大值往小值写，否则后面的会覆盖前面的
第一种方式，将判断条件写在style内
例：
<div></div>
<div></div>
<div></div>
<div></div>
CSS媒体查询设置
/* 设置默认的情况显示效果 */
div{
width:25%; height: 100px;
background: red;
/* css3的盒模型属性，内缩，border算在宽度(width)内 */
box-sizing: border-box;
border:1px solid green;
float: left;
}
/* 平板情况显示效果 */
@media (max-width:1023px) {
div{
width:50%; height: 100px;
background: red;
box-sizing: border-box;
border:1px solid green;
float: left;
}
}
/* 大屏手机情况显示效果 */
@media (max-width:480px) {
div{
width:100%; height: 100px;
background: red;
box-sizing: border-box;
border:1px solid green; float: left;
}
}
效果如下：
默认情况
平板情况
大屏手机情况
第二种方式，将判断条件写在head的link标签内，需要创建对应的css文件
<link rel="stylesheet" href="css-1023.css" media="(min-width:1024px)">
<link rel="stylesheet" href="css-481-1023.css" media="(min-width: 481px) and (max-width: 1023px)">
<link rel="stylesheet" href="css-480.css" media="(max-width: 480px)">
相对单位布局(rem)
基本思路就是：利用rem单位，就是相对于跟（html）字体的大小，来计算相应元素的宽高
- 一般将html的font-size设置为：20px或30px或50px或100px
- 还有利用浏览器默认自己大小(16px)也就是16px*62.5%=10px，这样就是html{font-size:62.5%;}，而不是html{font-size:10px;}因为浏览器（PC）最小就是12px。这样一来1rem = 10px；
我们来简单的看一下：
<div id="wrap">
<div id="div1">我是一个div标签</div>
</div>
CSS设置样式
#wrap{ font-size: 20px;}
#div1{
font-size: 1em;
width: 16em;
height: 2em;
background-color: lawngreen;
}
效果如下：
这里说一下为啥不用em，因为em是相对于父级字体大小的，这样一层套一层比较麻烦，还有就是当我想改变其中一个div的字体大小时，整个布局就乱套了
还有一个问题就是当我们的浏览器窗口发生大小变化时，原来的布局是不是也应该完美的显示呢。这里我们就利用js来根据浏览器可视区(clientWidth)来重新给html设置响应的字体大小
/* 这里我们利用了一个自执行函数 */
(function(){
change();
function change(){
/* 这里的html字体大小利用了一个简单书序公式（十字相乘），当我们默认设置以屏幕320px位基准此时的字体大小为20px(320 20px),那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth 新的值）就是clientWidth*20/320 */
document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';
}
/* 监听窗口大小发生改变时 */
window.addEventListener('resize',change,false);})();
注意：一般情况下我们利用rem单位来设置元素的宽高就行，没必要页面中的所有元素都用rem来弄（当然了这个也得看具体需求了）
