HTML5 Media query 調查報告模板

第一章 Media query知識點描述

Media query 是一個神奇的技術，他使不同的顯示裝置擁有更合理的顯示效果，該技術允許使用媒體表達式指定媒體型別，然後根據不同的媒體型別來選擇相應的樣式。他的'表示式格式為：

@media 媒體型別 and (裝置特性) {樣式程式碼}

通過指定相應的媒體型別和裝置特性，media query 技術會自動跟你設定的css進行匹配。常用的媒體型別有：screen(電腦顯示器),handheld(便攜裝置)，tv(電視及型別裝置)。

裝置特性：min-width,min-hEight等

第二章 技術價值論文聯盟

media query 可幫助我們解決橫屏和豎屏切換問題，使用mediaquery判斷使用者是否已經橫屏，如果橫屏則採用自定義的橫屏樣式的渲染。解決android終端的顯示螢幕的複雜性。

第三章 例項

例項名稱：

在大於960的可用區域下三欄同時顯示，在大於640小於960的情況下，右邊顯示在最下面，在小於640的情況一欄顯示

例項條件：

熟悉dreamweaver

網頁基礎知識

Media query相關知識

實現過程：

建立

寫入html並預覽，拖拽瀏覽器大小

加入css並預覽，拖拽瀏覽器大小

第四章 總結

media query 是在提高使用者體驗上比較重要的一個方面，他幫助我們使不同裝置之間的UI能保持更合理的顯示方式。