手機(jī)有不同的分辨率，不同的屏幕大小片橡，如何使我們開(kāi)發(fā)的應(yīng)用或頁(yè)面大小能適合各種高端手機(jī)使用妈经，學(xué)習(xí)viewport能幫助我們實(shí)現(xiàn)這一點(diǎn)。
首先引入<meta name="viewport" content="width=divice-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
定義和為什么使用
媒體查詢
彈性盒模型（Flexbox）
css3的彈性盒模型捧书，這是一個(gè)可以讓你告別浮動(dòng)吹泡，完美實(shí)現(xiàn)垂直居中的新特性。
flexbox布局的主體思想是似得元素可以改變大小以適應(yīng)可用空間经瓷，當(dāng)可用空間變大爆哑，flex元素將伸展大小以填充可用空間，當(dāng)flex元素超出可用空間時(shí)將自動(dòng)縮小了嚎，總之泪漂，flex元素是可以讓你的布局根據(jù)瀏覽器的大小變化進(jìn)行自動(dòng)伸縮。
創(chuàng)建flex容器
flexbox布局首先需要?jiǎng)?chuàng)建一個(gè)flex容器歪泳，為此給元素設(shè)置display屬性的值為flex.對(duì)于IE10來(lái)說(shuō)，我們需要在開(kāi)頭的地方添加-ms-flexbox
.container{
? ? ? ? ? ? ? ? ? ? display:-webkit-flex;
? ? ? ? ? ? ? ? ? ? display:-moz-flex;
? ? ? ? ? ? ? ? ? ? display:flex;
? ? ? ? ? ? ? ? ? ? display:-ms-flexbox;
? ? ? ? ? ? ?}
