HTMLCSS學習筆記（十九）-- 媒體查詢

媒體查詢

媒體查詢可讓咱們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）爲其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用於檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，能夠在不改變頁面內容的狀況下，爲特定的一些輸出設備定製顯示效果。

語法

@media all and (min-width:320px) { 
    body { background-color:blue;}
 }複製代碼

設備類型(默認值爲all)

關鍵字

screen 是媒體類型裏的一種，CSS2.1定義了10種媒體類型 

and 被稱爲關鍵字，其餘關鍵字還包括 not(排除某種設備)，only(限定某種設備) 

(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。

常見適配範圍

設備範圍
    默認樣式    注意：默認樣式要寫在最前面
    /* 打印樣式 */
        @media print {}
    /* 手機等小屏幕手持設備 */
        @media screen and (min-width: 320px) and (max-width: 480px) {}
    /* 平板之類的寬度 1024 如下設備 */
        @media only screen and (min-width: 321px) and (max-width: 1024px) {}
    /* PC客戶端或大屏幕設備: 1028px 至更大 */
        @media only screen and (min-width: 1029px) {}
    /* 豎屏 */
        @media screen and (orientation:portrait) {對應樣式}
    /* 橫屏 */
        @media screen and (orientation:landscape){對應樣式}複製代碼

本文摘自知乎號：千鋒HTML5學院

原文連接：HTMLCSS學習筆記（十九）-- 媒體查詢