Q022：對響應式網頁理解

Responsive Web Page:
響應式網頁/自適應的網頁，2010年提出，一個網頁，會自動根據用戶瀏覽設備不同，自動改變佈局，可以被PC/PAD/PHONE正常瀏覽
響應式網頁必備：
（1）流式佈局 float:left;
（2）可以改變尺寸圖片文字 font-size:1em;
響應式佈局不足：代碼更加複雜，不適合大型網頁

如果測試網頁：
（1）使用真實物理設備
（2）使用第三方模擬器軟件
（3）使用chrom內置設備模擬器

如何編寫響應式網頁
（1）聲明viewport元標籤

（2）使用流式佈局 float:left; （3）所有容器使用相對尺寸，不用絕對尺寸 % （4）所有文字使用相對尺寸，不用絕對尺寸 em （5）所有圖片使用相對尺寸，不用絕對尺寸 （6）（最重要原則）使用CSS3 Media Query技術

【CSS3 Media Query技術】
Media 指瀏覽網頁的設備，如screen,print,tv,tty
Media Query：查詢當前瀏覽網頁設備類型，以及特性（對比度，尺寸，手持方向等），而選擇性的執行某些css代碼，而忽略另外一些
媒體查詢使用方法兩種：
（1）根據媒體查詢結果執行不同的css文件

（2）根據媒體查詢結果執行css片段中不同部分