介紹一下什麼是媒體查詢

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

（推薦教學：）

實現頁面在不同裝置下正常預覽 [判斷當前裝置]

媒體型別

將不同的裝置劃分為不同的型別

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) {}