學習媒體查詢的核心是什麼?
#（推薦教學：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中文網其他相關文章！
