手机有不同的分辨率，不同的屏幕大小，如何使我们开发的应用或页面大小能适合各种高端手机使用，学习viewport能帮助我们实现这一点。
首先引入<meta name="viewport" content="width=divice-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
定义和为什么使用
媒体查询
弹性盒模型（Flexbox）
css3的弹性盒模型，这是一个可以让你告别浮动，完美实现垂直居中的新特性。
flexbox布局的主体思想是似得元素可以改变大小以适应可用空间，当可用空间变大，flex元素将伸展大小以填充可用空间，当flex元素超出可用空间时将自动缩小，总之，flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。
创建flex容器
flexbox布局首先需要创建一个flex容器，为此给元素设置display属性的值为flex.对于IE10来说，我们需要在开头的地方添加-ms-flexbox
.container{
display:-webkit-flex;
display:-moz-flex;
display:flex;
display:-ms-flexbox;
}
