CSS媒體查詢允許我們基于浏覽網站的裝置的特性來應用不同的樣式申明, 比如通過視口的寬度。對裝置提出詢問（稱作表達式）開始，如果表達式結果為真，媒體查詢中的CSS被應用，如果表達式結果為假，媒體查詢内的CSS将被忽略。
以@media開頭來表示這是一條媒體查詢語句。緊跟在@media後面的是一個或者多個表達式，可以判别為真或假。
在建立媒體查詢時，必須以媒體類型（此處為screen）作為第一個表達式，相對應的有：print（列印機）、braille（盲文）或者all（全部）等其他類型
示例如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>媒體查詢</title>
<style>
/*媒體查詢*/
@media screen and (max-width: 600px) {
body {
background-color: red;
}
#box {
font-size: 20px;
color: #fff;
}
}
@media screen and (min-width: 600px) and (max-width: 800px) {
body {
background-color: green;
}
#box {
font-size: 30px;
color: yellow;
}
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
body {
background-color: blue;
}
#box {
font-size: 40px;
color: #fff;
}
}
@media screen and (min-width: 1000px) {
body {
background-color: purple;
}
#box {
font-size: 50px;
color: pink;
}
}
</style>
</head>
<body>
<div id="box">
<h4> 根據螢幕的尺寸改變背景顔色:</h4>
<p>寬度 < 600 紅色</p> <p>寬度 600 - 800 綠色 </p>
<p>寬度 800 - 1000 藍色 </p>
<p>寬度>1000 紫色</p>
</div>
</body>
</html>
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)