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能保持更合理的顯示方式。