目錄

多媒體查詢

語法

示例代碼

通用媒體查詢

媒體功能參考列表

---

多媒體查詢

? ? ? ?CSS的媒體查詢是一種CSS的技術，它可以根據(jù)不同的設備類型、屏幕尺寸、方向、分辨率等條件來應用不同的CSS樣式，從而為不同的設備和屏幕提供最佳的瀏覽體驗。這樣，當用戶使用不同的設備或屏幕瀏覽網頁時，網頁的樣式表現(xiàn)可以根據(jù)不同的條件自動進行調整，以保證頁面的最佳顯示效果。例如，在移動設備上，可以使用媒體查詢來設置更小的字體大小，更緊湊的布局等等，以提高可讀性和用戶體驗。

?語法

## (1) 局部樣式的媒體查詢
@media [not]|[only] mediaType and (expressions) {
? ? CSS 代碼...;
}

## (2) 不同的設備加載不同的css文件
<link rel="stylesheet" media="mediaType and|not|only (expressions)" href="mymedia.css">

## 語法解析
(1) @media：媒體查詢關鍵詞；
(2) 媒體修飾詞：not(非限制)、only(唯一限制)、不寫前二者(即所有，不限制)；
(3) mediaType：媒體類型，all(所有)、print(打印機)、screen(屏幕)、speech(屏幕閱讀器)等等，可參考媒體功能部分；

?示例代碼

## (1) 當頁面寬度小于480px時，將背景顏色改為lightgreen
@media screen and (max-width: 480px) {
? ? body {
? ? ? ? background-color: lightgreen;
? ? }
}
## (2) 當頁面寬度大于480px時，將背景顏色改為lightgreen
@media screen and (min-width: 480px) {
? ? #leftsidebar {width:200px;float:left;}
? ? #main {margin-left:216px;}
}
## 總結
max-width確定了右邊界，所以對應的媒體樣式執(zhí)行的條件就是(0,max-width]
min-width確定了左邊界，所以對應的媒體樣式執(zhí)行的條件就是[min-width,+∞)

?通用媒體查詢

/* 手機屏幕  (小于等于 767px) */
@media only screen and (max-width: 767px) {/* 在這里可以導入手機屏幕的外部css */@import url("mobile.css");/*這里寫針對手機屏幕的樣式*/
}/* 平板屏幕  (768px 到 991px ) */
@media only screen and (min-width: 600px) {/* 在這里可以導入平板屏幕的外部css */@import url("pad.css");/*這里寫針對平板屏幕的樣式*/
}/* 普通電腦屏幕  (992px 到 1199px) */
@media only screen and (min-width: 768px) {/* 在這里可以導入普通電腦屏幕的外部css */@import url("computer.css");/*這里寫針對普通電腦屏幕的樣式*/
} /* 大屏電腦屏幕  (大于等于 1200px) */
@media only screen and (min-width: 992px) {/* 在這里可以導入大屏電腦屏幕的外部css */@import url("big-computer.css");/*這里寫針對大屏電腦屏幕的樣式*/
} 

媒體功能參考列表

值	描述
aspect-ratio	定義輸出設備中的頁面可見區(qū)域寬度與高度的比率
color	定義輸出設備每一組彩色原件的個數(shù)。如果不是彩色設備，則值等于0
color-index	定義在輸出設備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表，則值等于0
device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的比率。
device-height	定義輸出設備的屏幕可見高度。
device-width	定義輸出設備的屏幕可見寬度。
grid	用來查詢輸出設備是否使用柵格或點陣。
height	定義輸出設備中的頁面可見區(qū)域高度。
max-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color	定義輸出設備每一組彩色原件的最大個數(shù)。
max-color-index	定義在輸出設備的彩色查詢表中的最大條目數(shù)。
max-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-device-height	定義輸出設備的屏幕可見的最大高度。
max-device-width	定義輸出設備的屏幕最大可見寬度。
max-height	定義輸出設備中的頁面最大可見區(qū)域高度。
max-monochrome	定義在一個單色框架緩沖區(qū)中每像素包含的最大單色原件個數(shù)。
max-resolution	定義設備的最大分辨率。
max-width	定義輸出設備中的頁面最大可見區(qū)域寬度。
min-aspect-ratio	定義輸出設備中的頁面可見區(qū)域寬度與高度的最小比率。
min-color	定義輸出設備每一組彩色原件的最小個數(shù)。
min-color-index	定義在輸出設備的彩色查詢表中的最小條目數(shù)。
min-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最小比率。
min-device-width	定義輸出設備的屏幕最小可見寬度。
min-device-height	定義輸出設備的屏幕的最小可見高度。
min-height	定義輸出設備中的頁面最小可見區(qū)域高度。
min-monochrome	定義在一個單色框架緩沖區(qū)中每像素包含的最小單色原件個數(shù)
min-resolution	定義設備的最小分辨率。
min-width	定義輸出設備中的頁面最小可見區(qū)域寬度。
monochrome	定義在一個單色框架緩沖區(qū)中每像素包含的單色原件個數(shù)。如果不是單色設備，則值等于0
orientation	定義輸出設備中的頁面可見區(qū)域高度是否大于或等于寬度。
resolution	定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定義電視類設備的掃描工序。
width	定義輸出設備中的頁面可見區(qū)域寬度。