現如今在Web前端領域，BootStrap是一個最流行的UI庫，其12列的柵欄系統為響應式布局提供了一種對程序員來說很好操作的模式。

追究Bootstrap的內在原理，其實就是通過媒體查詢來完成對不同屏幕大小、不同分辨率、不同設備導致的不同場景下的Css樣式的選擇。今天我就對媒體查詢這一工具或者說方法來進行一個總結。

從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支持。

1、如何使用媒體查詢：

XML/HTML Code復制內容到剪貼板

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

以上的兩句引入Css樣式表的語句，比一般的Css引入語句就多了一個關鍵字“media”，media 屬性定義了應該用于指定每種媒體類型的樣式表：

•screen 適用于計算機彩色屏幕。
•print 適用于打印預覽模式下查看的內容或者打印機打印的內容。
*這里是將media屬性放在了Css引入的語句中，所以在以下查詢語句中就可以省略screen或者print。

2、一般的媒體查詢語法：

XML/HTML Code復制內容到剪貼板

@media “media type” condition {/*CSS樣式表*/}其中“@media”也可以有另一中寫法，“media=”；   
  

“media type”是應用媒體查詢的媒體類型，例如“all”，意思是所有媒體都使用接下來的css樣式表；或者“(min-width:800px)”，意思是屏幕最小寬度為800px時使用接下來的CSS樣式表，如果屏幕寬度大于800px則不會應用此CSS。

也就是說，媒體查詢包含一個媒體類型，后跟一個或多個檢查特定條件（如最小的屏幕寬度）的表達式。通過評估條件的真假，如果改條件為true則應用Css，否則不應用。

由此我們可以擴展出很多的媒體查詢類型。

3、在Css的媒體查詢中，可以使用三種邏輯運算，也即“and”，“or”，“not”，意思我當然不用解釋。舉幾個例子一眼就明白了：

CSS Code復制內容到剪貼板

/*在將某個媒體查詢應用于所有媒體類型時，會省略 all*/  
@media (min-width:800px) { … }   
/*寬度在800~1200px之間時激活*/  
@media (min-width:800px) and (max-width:1200px) { … }   
/*可以使用多個and運算符，這里添加了第三個判斷方向為縱向*/  
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { … }