引：Bootstrap采用的是一個“響應式”設計。響應式Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。例如，您先在計算機顯示器上瀏覽一個網站，然后再智能手機上瀏覽，智能手機的屏幕 尺寸遠小於計算機顯示器，但是你卻沒有感覺到任何差別，兩者的用戶體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好(響應式:簡單可以理解為不同的 設備屏幕的大小是不同的，但是頁面中的內容是固定的，為了讓用戶在不同大小屏幕看到的內容更加友好，頁面的內容或排版需要更隨屏幕的變化而變化)。
一個簡單的列子：問題分析，我們需要做一個網站，而且需要讓網頁中的內容居中顯示（90%的網站都是如此）。
1440*900分辨率效果如下：
通過firebug工具查看到container的內容寬度為1150,內邊距為15（左邊、右邊）*2,所占總寬度為1150+15*2=1180px。
接下來，請嘗試拖動瀏覽器讓瀏覽器的寬度變小，注意當瀏覽器的寬度小於1200px的時候你會發現container的寬度變為了970(內容寬度940+內邊距為15（左邊、右邊）*2)
通過瀏覽器寬度修改而導致container的寬度變化的這個細節，我們可以看出bootstrap內部感知的了這個小細節，並且做出了一定的響應。那么Bootstrap到底使用了什么高端的技術來實現這個功能的。
CSS3 Media Queries（媒體（設備）查詢）
Media Queries含義：為不同的媒體類型添加某些條件，檢測設備並采用不同的樣式表。
簡單例子：
圖為普通屏幕和打印分別定義樣式
普通頁面顯示內容為：
打印預覽頁面顯示內容為 (firefox打印預覽顯示：文件--->打印預覽)
通過以上的一個簡單的例子你已經知道Media Queries（媒體查詢）到底能干什么了，頁面內容在不同的媒體環境運行時，會自動查詢應用我們編寫的特定樣式。
Bootstrap中也是使用了Media Queries（媒體查詢）來實現了響應式布局 ，bootstrap.css中定義如下代碼:
以上代碼實現了隨瀏覽器寬度的變化container容器的寬度也進行變化。
@media部分代表任何媒體
(min-width: 1200px)部分代表條件,min-width指媒體（瀏覽器）寬度不小於（大於）1200條件成立。 比如：瀏覽器的寬度為1250，條件成立使用該樣式。瀏覽器的寬度為1119，條件不成立。
bootstrap.css中很多地方都使用了@media（media queries媒體查詢），比如工具條、柵格（網格）系統。建議各位讀者打開bootstrap.css文件，搜索“@media”，對這些樣式進行分 析，這對學習bootstrap非常有幫助。
關注作者：
