好長時間不是很清楚css的媒體查詢是做什麼的。今天看到一篇文章才搞明白了。通過媒體查詢可以爲不同大小和尺寸的媒體定義不同的css，適合相應的設備顯示。看圖：
看代碼:
<head>
<link rel="stylesheet" href="smartphone.css"
media="only screen and (min-device-width : 320px)
and (max-device-width : 480px)">
<link rel="stylesheet" href="smartphone-landscape.css"
media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="smartphone-portrait.css"
media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="ipad.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">
<link rel="stylesheet" href="ipad-portrait.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css"
media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="iphone4.css"
media="only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)">
</head>
取值：
- <sMedia>：
- 指定設備名稱。請參閱附錄：設備類型
- {sRules}：
- 樣式表定義。
說明：
判斷媒介(對象)類型來實現不同的展現。此特性讓CSS可以更精確作用於不同的媒介類型，同一媒介的不同條件（分辨率、色數等等）.
media_query: [only | not]? <media_type> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid
上邊是css3媒體查詢的文檔。
下邊是一個更清楚的例子，拷貝下邊的代碼到一個html文件中，修改你的屏幕的分辨率的大小爲800*600和1280*800.查看頁面效果,你就更明白css媒體查詢了.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>media queries</title>
</head>
<style>
div.example{background-color: #cee;}
@media all and (min-width: 640px) {
div.example {
background-color: #cff;
}
}
@media screen and (max-width: 1100px) {
div.example {
background-color: #c00;
}
}
</style>
<body>
<div class="example">
這是一個背景色例子 -_-!!!
</div>
</body>
</html>