網站建設計劃 文庫原畫培訓班一般學費多少
目錄
多媒體查詢
語法
示例代碼
通用媒體查詢
媒體功能參考列表
多媒體查詢
? ? ? ?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ū)域寬度。 |