在Bootstrap中，媒體查詢可以透過螢幕的大小來分辨使用的裝置並設定不同樣式，可以在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。
本教學操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦
bootstrap媒體查詢透過螢幕的大小來分辨你使用的設備
額外的小裝置（手機，小於768px）
小型裝置（平板電腦，768px 起）
中型裝置（桌上型電腦，992px 起）
#大型裝置（大桌上型電腦，1200px 起）
#媒體查詢能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果。前面簡單的介紹了媒體查詢如何引用到專案中，但媒體查詢有自己的使用規則。具體來說，媒體查詢 的使用方法如下。
@media 媒体类型and （媒体特性）{你的样式}登入後複製
注意：使用媒體查詢必須使用「@media」開頭，然後指定媒體類型（也可以稱為裝置類型），隨後是指定媒體特性（也可以稱之為裝置特性）。媒體特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個部分，第一個部分指的是媒體特性，第二部分為媒體特性所指定的值，而且這兩個部分之間使用冒號分隔。例如：
(max-width: 480px)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。
登入後複製
1、最大寬度max-width
「max-width」是媒體特性中最常使用的特性，其意思是指媒體類型小於或等於指定的寬度時，樣式生效。如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}登入後複製
上面表示的是：當螢幕小於或等於480px時,頁面中的廣告區塊（.ads）都會被隱藏。
2、最小寬度min-width
「min-width」與「max-width」相反，指的是媒體類型大於或等於指定寬度時，樣式生效。
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}登入後複製
上面表示的是：當螢幕大於或等於900px時，容器「.wrapper」的寬度為980px。
3、多個媒體特性使用
Media Queries可以使用關鍵字"and"將多個媒體特性結合在一起。也就是說，一個Media Query中可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種媒體類型。
當畫面在600px~900px之間時，body的背景色渲染為“#f5f5f5”，如下所示。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}登入後複製
4、裝置螢幕的輸出寬度Device Width
在智慧型裝置上，例如iPhone、iPad等，也可以根據螢幕裝置的尺寸來設定對應的樣式（或呼叫對應的樣式檔）。同樣的，對於螢幕裝置同樣可以使用「min/max」對應參數，如「min-device-width」或「max-device-width」。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
登入後複製
上面的程式碼指的是「iphone.css」樣式適用於最大裝置寬度為480px，比如說iPhone上的顯示，這裡的「max-device-width」所指的是裝置的實際分辨率，也就是指可視面積分辨率。
5、not關鍵字
使用關鍵字「not」是用來排除某種制定的媒體類型，也就是用來排除符合表達式的設備。換句話說，not關鍵字表示對後面的表達式執行取反操作，如：
@media not print and (max-width: 1200px){样式代码}登入後複製
上面程式碼表示的是：樣式程式碼將被使用在除列印設備和裝置寬度小於1200px下所有設備中。
6、only關鍵字
only用來指定某種特定的媒體類型，可以用來排除不支援媒體查詢的瀏覽器。其實only很多時候是用來對那些不支援Media Query但支援Media Type的裝置隱藏樣式表的。其主要有：支援媒體特性的設備，正常呼叫樣式，此時就當only不存在；表示不支援媒體特性但又支援媒體類型的設備，這樣就會不讀樣式，因為其先會讀取only而不是screen；另外不支援Media Queries的瀏覽器，不論是否支援only，樣式都不會被採用。如
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
登入後複製
在Media Query中如果沒有明確指定Media Type，那麼其預設為all，如：
<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />
登入後複製
另外在樣式中，還可以使用多條語句來將同一個樣式應用於不同的媒體類型和媒體特性中，指定方式如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
登入後複製
上面程式碼中style.css樣式被用在寬度小於或等於480px的手持裝置上，或被用於螢幕寬度大於或等於960px的裝置上。
到目前為止，CSS3 媒體查詢得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支援之外，在所有現代瀏覽器中都可以完美支援。還有一個與眾不同的是，媒體查詢在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。
【相關推薦：《bootstrap教學》】
以上是bootstrap媒體查詢有什麼作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
