移动端布局；
移动端布局目前流行的是两种；一种是利用弹性盒模型flex布局，一种是使用rem单位搭配viewport标签使宽度自适应，还需要借助一小段js；才能完美制作出自适应页面；下面记录总结一下，自己这两天的作页面时应用到的属性；
一、Flex布局是什么？
Flex是Flexible Box的缩写，意为”弹性布局”。任何一个盒模型都可以用flex布局。display：flex；一般加给盒模型的父级；
<style>
.box{
display:flex;
}
</style>
<body> <div class="box"> <div></div> </div> </body>
注意：不仅块元素可以使用display：flex；行内元素也可以；display:inline-flex;flex:1;等比；自动分配剩余空间分为1份；
flex容器的属性（注意一下效果都是给父级加子级实现的效果；）
1.flex-direction
主要设置主轴的方向，元素在父级的排列方式。
flex-direction：row;从左到右排列；加上-reverse反向排列；
flex-direction：column；从上到下排列；
2.flex-wrap 主要设置元素是否折行显示；如果希望控制元素一行或者多行排列，可以使用flex-wrap；
flex项目在flex容器中默认只显示一行。
flex-wrap：nowrap;根据屏幕自动缩放大小；
flex-wrap：wrap；根据每个子item动态布局；
3.flex-basis:80px;设置弹性盒模型的初始长度为80px;可接收数值，auto，initial，inherit
4.justify-content 元素自己在flex容器中的水平方向对齐方式；
flex-start左边靠齐（默认）
flex-end右边靠齐
center居中对齐
space-between：平分空白空间；左右两边靠拢剩下平分；
<style> .box{ width:500px; height:500px; border:1px solid #000; display:flex; justify-content:space-between; } .box div{ width:60px; height:100px; border:1px solid #F00; } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body>
space-around：分布在flex容器内，左右两边的空隙是元素与元素间的一般
<style>
.box{
500px;
height:500px;
border:1px solid #000;
display:flex;
justify-content:space-around;
}
.box div{
60px;
height:100px;
border:1px solid #F00;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
5.align-items flex项目在容器中的对齐方式；类似与justify-content；只不过它是纵向对齐方式；可以设置容器内所有元；可以与justify-content搭配使用；
接收值为，flex-start，center，flex-end ，stretch（默认拉伸充满flex容器），space-between，space-around；
6.align-self:改变本身的对齐方式;justify-content + align-items改变的是子级的排列方式；
center/flex-start/flex-end7.复合使用；.justify-content + align-items出现的一些效果。代码就不传了，很简单的；（注意属性都是加给父级的）
display:flex; 默认是首行居左的效果
justify-content:center; 首行居中效果；
justify-content：flex-end；首行居右；
align-items:center; 靠左居中效果；
align-items:center;justify-content:center; 上下左右居中效果；
justify-content：center；align-items：flex-end；靠下居中；
justify-content:flex-end;align-itmes:felx-end;右下角；
justify-content：space-between；空白之间；都向左右两边靠拢；
felx-direction:column（ 改变方向由行改变成列；）;justify-content：space-between；靠左一上一下；
felx-direction：column；justify-content：space-between；justify-content：center；靠中间一上一下；
注意：当主轴方向是row时，align-items的对齐方式是纵向，当主轴方向为column时，align-items对齐方式是水平方向；
二.viewport+rem布局
1.什么是viewport???
viewport浏览器显示网页的实际宽度；成为网页可视区。目前viewPort的值大多数是980px；viewport的对于多屏时代的移动端布局有着极为重要的作用；
2.设置viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。(如果设为0.5的话切图时可以按照原先大小布局，不过有兼容性问题)
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。
3.rem是css新增加的一个相对单位（root em，根em）使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML字体根元素。一般给html标签设置字体大小，相对于这个值来计算尺寸大小；
px与rem可以一起搭配使用不过如何选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
为了更好的适应不同浏览器我们还需要js动态改变根节点字体的大小
<script> var doc = document.documentElement; alert(doc.clientWidth) doc.style.fontSize = doc.clientWidth/320 * 100 + 'px'; window.onresize = function(){ doc.style.fontSize = doc.clientWidth/320 * 100 + 'px'; } </script>
1.clientWidth是不同屏幕的可视区宽
2.320是设计稿的宽
3.100是根字体大小
三，移动端布局总结！
1.切图时实际像素与视觉有一个1:2的比例；所以需要计算实际尺寸；
2.当切一些图片时，按照设计稿大小切。在HTML中利用background-size进行压缩；
3.移动端盒模型，使用box-sizing:border-box;使盒模型边框放在盒模型内部不占用空间。否则页面会有偏差；
4.移动端一布局一般采用，两头固定中间自适应布局；