响应式布局和弹性盒模型，使用媒体查询和rem布局

手机有不同的分辨率，不同的屏幕大小，如何使我们开发的应用或页面大小能适合各种高端手机使用，学习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;

             }