一、概念
- CSS媒體查詢
一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能限制樣式表范圍的表達式組成， 例如 寬度，高度和顏色。這些表達式描述了媒體特征， 最終會被解析為true或false。 如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設(shè)備類型， 并且所有的表達式的值都是true，那么該媒體查詢的結(jié)果為true。在CSS3中添加的媒體查詢，允許內(nèi)容的呈現(xiàn)針對一個特定范圍的輸出設(shè)備而定制，而不必改變內(nèi)容本身。 - flex布局
Flexbox布局（Flexible Box）模塊旨在提供一個更佳有效的布局方式，更好的控制項目的對齊和自由分配容器空間，即使它們的大小是未知的或動態(tài)的。因此得其名"flex"。
1.用來為盒狀模型提供最大的靈活性。
2.任何一個容器都可以指定為flex布局
3.設(shè)為flex布局后，子元素的float、clear、vertical-align屬性將消失。
4.采用flex布局的元素，稱為flex容器，簡稱容器。
5.它的所有子元素自動成為容器成員，稱為flex項目，簡稱項目。
6.容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。 - 柵格系統(tǒng)
柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。
更多http://v3.bootcss.com/css/#grid
二、媒體查詢demo
