前端開發響應式設計之媒體查詢（bootstrap）

媒體查詢就是可以根據裝置顯示器的特性（視口寬度、螢幕比例、裝置方向-橫向或者豎向等）為其設定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檔案，可以在列印的時候添加額外想添加的格式