bootstrap框架怎麼自適應手機

在行動終端設備起來越多的今天，如果要針對做所有螢幕去適配開發成本太大。

透過響應式開發使得一個網站能夠相容於多種終端。 （推薦學習：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相關技術文章，請造訪

Bootstrap教學

欄位進行學習！

以上是bootstrap框架怎麼自適應手機的詳細內容。更多資訊請關注PHP中文網其他相關文章！