介紹一下什麼是媒體查詢

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

#（推薦教學：html影片教學）

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

媒體類型

#將不同的裝置分割成不同的型別

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

相關推薦：html教學

以上是介紹一下什麼是媒體查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！