使用@media查詢,你可以針對不同媒體類型定義不同的樣式
當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面
語法:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
也可以針對不同的媒體使用不同的 stylesheets
<link rel='stylesheet' media='mediatype and|not|only (media feature)' href=''>
注意:主樣式在前,媒體查詢在後,因爲css是層疊樣式表,在同一特殊性下,靠後的樣式會重疊前面的樣式
實例
如果文檔寬度小於300像素則修改背景顏色
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
媒體類型
all 用於所有設備
aural 已廢棄,用於語音和聲音合成器
braille 已廢棄,應用於盲文觸摸式反饋設備
embossed 已廢棄,用於打印的盲人印刷設備
handheld 已廢棄,用於掌上設備或更小的裝置，如PDA和小型電話
print 用於打印機和打印預覽
projection 已廢棄,用於投影設備
screen 用於電腦屏幕,平板電腦,智能手機等。
speech 應用於屏幕閱讀器等發聲設備
tty 已廢棄.用於固定的字符網格，如電報、終端設備和對字符有限制的便攜設備
tv 已廢棄,用於電視和網絡電視
媒體功能
aspect-ratio 定義輸出設備中的頁面可見區域寬度與高度的比率
color 定義輸出設備每一組彩色原件的個數.如果不是彩色設備,則值等於0
color-index 定義在輸出設備的彩色查詢表中的條目數,如果沒有使用彩色查詢表,則值等於0
device-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的比率
device-height 定義輸出設備的屏幕可見高度
device-width 定義輸出設備的屏幕可見寬度
grid 用來查詢輸出設備是否使用柵格或點陣
height 定義輸出設備中的頁面可見區域高度
max-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的最大比率
max-color 定義輸出設備每一組彩色原件的最大個數
max-color-index 定義在輸出設備的彩色查詢表中的最大條目數
max-device-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的最大比率
max-device-height 定義輸出設備的屏幕可見的最大高度
max-device-width 定義輸出設備的屏幕最大可見寬度
max-height 定義輸出設備中的頁面最大可見區域高度
max-monochrome 定義在一個單色框架緩衝區中每像素包含的最大單色原件個數
max-resolution 定義設備的最大分辨率
max-width 定義輸出設備中的頁面最大可見區域寬度
min-aspect-ratio 定義輸出設備中的頁面可見區域寬度與高度的最小比率
min-color 定義輸出設備每一組彩色原件的最小個數
min-color-index 定義在輸出設備的彩色查詢表中的最小條目數
min-device-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的最小比率
min-device-width 定義輸出設備的屏幕最小可見寬度
min-device-height 定義輸出設備的屏幕的最小可見高度
min-height 定義輸出設備中的頁面最小可見區域高度
min-monochrome 定義在一個單色框架緩衝區中每像素包含的最小單色原件個數
min-resolution 定義設備的最小分辨率
min-width 定義輸出設備中的頁面最小可見區域寬度
monochrome 定義在一個單色框架緩衝區中每像素包含的單色原件個數,如果不是單色設備,則值等於0
orientation 定義輸出設備中的頁面可見區域高度是否大於或等於寬度
resolution 定義設備的分辨率.如:96dpi, 300dpi, 118dpcm
scan 定義電視類設備的掃描工序
width 定義輸出設備中的頁面可見區域寬度