作用：爲兼容不同尺寸的屏幕，動態修改尺寸
Flex box（彈性盒子屬性）
一、概念瞭解
①彈性容器（flex container）
②彈性子元素（flex item）
③主軸（main axis，子元素排列方向）；側軸（cross axis，垂直於主軸方向）
④主軸開始（main start）、結束；側軸開始、結束
彈性容器屬性，見圖
彈性子元素屬性，見圖
Multi-column（多列屬性）
多列屬性，見圖
Media Query（媒體查詢分析）
一、響應式佈局：針對不同的設備用的同一套網站，依據設備環境來顯示不同佈局
核心是：媒體查詢，指獲取用戶設備環境，提供對應css規則
語法：
①在link元素中進行查詢
<link rel="stylesheet" media="(max-width:800px)" href="xx.css"/>②在樣式表中的css媒體查詢
<style>
@media(max-width:600px){
.div{
display:none;
}
}
</style>③常見應用，見圖
響應式表格
通常有兩種響應式匹配方式：
①自動添加滾動條
②對錶格進行摺疊，即表頭反轉
響應式圖片
實現方式：
①image的srcset 和 sizes 屬性加載不同圖片，舉例，如圖
②picture、source media 加載不同圖片
③source type 指定多種圖片格式
④最好的方式：polyfill-picturefill （能兼容瀏覽器，需要從外部加載js文件）
PS兩個小知識點：
搜索測試瀏覽器對某些特性的支持情況：
http://www.caniuse.com
emmet簡寫方式：
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html
兼容問題的代碼生成：
CodePen網站有一個內置功能可以實現
注：本文所有圖片均截止極客學院HTML5視頻教程，供學習查找備用。視頻很好，向大家推薦
