在行動終端設備起來越多的今天，如果要針對做所有螢幕去適配開發成本太大。
透過響應式開發使得一個網站能夠相容於多種終端。 （推薦學習：Bootstrap影片教學）
透過響應式佈局能讓網站在電腦、平板和手機上有更好的閱覽體驗，螢幕尺寸不一樣展示給使用者的網頁內容也不一樣，我們利用媒體查詢可以偵測到螢幕的尺寸（主要偵測寬度），並設定不同的CSS樣式，就可以實現響應式的佈局。
響應式開發的原理：媒體查詢
媒體查詢，查詢到目前螢幕(媒介媒體)的寬度，針對不同的螢幕寬度設定不同的樣式來適應不同螢幕。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。簡單說，你可以設定 不同螢幕下面的不同的樣式，達到適合不同的螢幕的目的。
實作方式：透過查詢screen的寬度來指定某個寬度區間的網頁佈局。
超小螢幕 （行動裝置） w<768px
小螢幕裝置 768px-992px 21 中螢幕# 768px-992px 192plt 200px 992 =< w <1200
寬屏設備 1200px以上 w>=1200
CSS 語法：@media mediatype and|not|only (media feature) {
CSS-Code;
}
以上是bootstrap框架怎麼自適應手機的詳細內容。更多資訊請關注PHP中文網其他相關文章！
