手機有不同的分辨率，不同的屏幕大小，如何使我們開發(fā)的應(yīng)用或頁面大小能適合各種高端手機使用，學(xué)習(xí)viewport能幫助我們實現(xiàn)這一點。

首先引入<meta name="viewport" content="width=divice-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

定義和為什么使用

媒體查詢

彈性盒模型（Flexbox）

css3的彈性盒模型，這是一個可以讓你告別浮動，完美實現(xiàn)垂直居中的新特性。

flexbox布局的主體思想是似得元素可以改變大小以適應(yīng)可用空間，當(dāng)可用空間變大，flex元素將伸展大小以填充可用空間，當(dāng)flex元素超出可用空間時將自動縮小，總之，flex元素是可以讓你的布局根據(jù)瀏覽器的大小變化進(jìn)行自動伸縮。

創(chuàng)建flex容器

flexbox布局首先需要創(chuàng)建一個flex容器，為此給元素設(shè)置display屬性的值為flex.對于IE10來說，我們需要在開頭的地方添加-ms-flexbox

.container{

? ? ? ? ? ? ? ? ? ? display:-webkit-flex;

? ? ? ? ? ? ? ? ? ? display:-moz-flex;

? ? ? ? ? ? ? ? ? ? display:flex;

? ? ? ? ? ? ? ? ? ? display:-ms-flexbox;

? ? ? ? ? ? ?}