什麼是媒體查詢?

媒體查詢

媒體指的就是各類設備 (移動設備, PC設備)
查詢指的是要檢測屬於哪一種設備

媒體查詢: 經過查詢當前屬於哪一種設備, 讓網頁可以在不一樣的設備下正常的預覽
複製代碼

學習媒體查詢的核心是什麼?

實現頁面在不一樣設備下正常預覽 [判斷當前設備]

媒體類型

將不一樣的設備劃分爲不一樣的類型

all (全部的設備)
print (打印設備)
screen (電腦屏幕,平板電腦,智能手機)
複製代碼

媒體特性

用來描述設備的特色,好比寬度,高度...
複製代碼

• width 網頁顯示區域徹底等於設置的寬度
• height 網頁顯示區域徹底等於設置的高度
• max-width / max-height 網頁顯示區域小於等於設置的寬度
• min-width / min-width 網頁顯示區域大於等於設置的寬度
• orientation: portrait (豎屏模式) | landscape (橫屏模式)

語法關鍵字

目的將媒體類型和媒體特性連接到一塊,進行設備檢測
複製代碼

• and 能夠將多個媒體特性連接到一塊,至關於且
• not 排除某個媒體特性 至關於非,能夠省略
• only 指定某個特定的媒體類型, 能夠省略

語法

• 外聯式語法

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
複製代碼

- 內嵌式語法
      @media only screen  and (max-width: 420px) {
      	body {
      		background-color: red;
      	}
      }
      
      備註: 多個條件聯寫
      @media only screen and (width: 320px) and (height: 568px) {}
複製代碼