媒體查詢就是可以根據裝置顯示器的特性（視口寬度、螢幕比例、裝置方向-橫向或者豎向等）為其設定CSS樣式

為什麼響應式設計需要媒體查詢？因為沒有CSS3的媒體查詢模組，就不能針對裝置特性（尤其是視口寬度）設定特定的CSS樣式

bootstrap.css檔案最後的若干行，就是有關媒體查詢的程式碼，先暫時不看他的原始碼，看下面的簡單的css示例程式碼：

body {
	background-color: white;
}
@media screen and (max-width: 960px){
	body {
	background-color: red;
}
}
@media screen and (max-width: 768px){
	body {
	background-color: yellow;
}
}
@media screen and (max-width: 550px){
	body {
	background-color: green;
}
}
@media screen and (max-width: 320px){
	body {
	background-color: blue;
}
}
 

給元素body定義了背景顏色白色，媒體查詢檢視當前是否是顯示器screen，判斷正確之後，再去檢視當前screen的大小，根據不同的大小覆蓋當前body背景顏色

上面的程式碼就是仿照bootstrap寫的CSS3檔案

媒體查詢只有CSS3才有麼，其實CSS2的時候就有這個了

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">

通過匯入link標籤，媒體查詢進行判斷，如果當前裝置是顯示器，而不是印表機等其他的裝置，那麼就匯入screen.css檔案，這裡要注意media和href的順序，不要顛倒

之前有寫過將media判斷print印表機的情況，這樣如果是印表機，匯入相關css檔案，可以在列印的時候新增額外想新增的格式