可參考**： 進行使用
通過檢測裝置資訊，決定網頁布局方式，即使用者如果採用不同的裝置訪問同乙個網頁，有可能會看到不一樣的內容，一般情況下是檢測裝置螢幕的寬度來實現。乙個簡單的案例螢幕變小了之後，屬於同一行的元素受到擠壓後，行的右邊元素自動換行顯式； 螢幕大了後，本屬於同一行的元素盡可能的排在同一行內；
<
!doctype html public
"-//w3c//dtd xhtml 1.0 transitional//en"
"">
"">
<
!--網頁編碼，要使用的外部檔案，自動適應螢幕--
>
"content-type" content=
"text/html; charset=utf-8"
/>
"css/bootstrap.css" rel=
"stylesheet" media=
"screen"
>
"viewport"
content=
"width=device-width,initial-scale=1.0,user-scalable=no"
>
柵格系統<
/title>
<
/head>
<
!--使用bootstrap如果不使用面板的話，要把元素放進乙個佔滿100
%螢幕的容器裡--
>
class
="container"則自動居中--
>
="container-fluid"
>
<
!--定義一行--
>
="row"
>
<
!--xs代表手機小螢幕，md代表平板中螢幕，lg代表pc大螢幕--
>
<
!--同一對的元素之和必須等於12，否則出現錯誤，如a的col-xs-2+
b的col-xs-
10是等於12的--
>
<
!--bg-warning是定義淺黃色的背景色--
>
="col-xs-2 col-md-8 col-lg-4 bg-warning"
>
a<
/div>
="col-xs-10 col-md-4 col-lg-8 bg-primary"
>
b<
/div>
<
/div>
="row"
>
<
!--這裡的道理與上面的一樣，a的col-xs-1+
b的col-xs-1+
c的col-xs-
10是等於12的--
>
="col-xs-1 col-md-10 col-lg-1 bg-warning"
>
a<
/div>
="col-xs-1 col-md-1 col-lg-10 bg-primary"
>
b<
/div>
="col-xs-10 col-md-1 col-lg-1 bg-success"
>
c<
/div>
<
/div>
<
/div>
<
/body>
<
/html>
響應式開發
在移動互聯日益成熟的時候，桌面瀏覽器上開發的網頁已經不能滿足移動端的裝置的展示和閱讀時，之前，通常的做法是對移動端單獨開發一套特定的版本；但是，如果移動終端裝置起來越多的時候賦發成本太大，是因為需要做所有螢幕的適配響應式開發的目的就是:乙個**能夠相容多種終端。
在新建的**上一般都會使用響應式開發移動web開發和響應式開發是必須具備的技能演示響應者頁面
響應式開發的原理：**查詢
查詢媒介，查詢到當前螢幕(媒介**)的寬度，針對不同的螢幕寬度設定不同的樣式來適應不同螢幕。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。簡單來說，你可以設定 不同螢幕下面的不同的樣式，達到適配不同的螢幕的目的。
其使用的一些功能 值
描述device-height
定義輸出裝置的螢幕可見高度。
device-width
定義輸出裝置的螢幕可見寬度。
max-device-height
定義輸出裝置的螢幕可見的最大高度。
max-device-width
定義輸出裝置的螢幕最大可見寬度。
min-device-width
定義輸出裝置的螢幕最小可見寬度。
min-device-height
定義輸出裝置的螢幕的最小可見高度。
max-height
定義輸出裝置中的頁面最大可見區域高度。
max-width
定義輸出裝置中的頁面最大可見區域寬度。
min-height
定義輸出裝置中的頁面最小可見區域高度。
min-width
定義輸出裝置中的頁面最小可見區域寬度。
.container
/***查詢：注意and後面空格的新增*/
/*iphone: w < 768px*/
@media screen and
(max-width:
768px)
}/*pad: w >= 768 && w< 992*/
@media screen and
(max-width:
992px)
and(min-width:
768px)
}/*中等螢幕 w >= 992 && w<1200*/
@media screen and
(max-width:
1200px)
and(min-width:
992px)
}<
/style>
具體可以參考來進行操作
bootstrap響應式布局
1.bootstrap布局容器 bootstrap 需要為頁面內容和柵格系統包裹乙個 container 或者.container fluid 容器，它提供了兩個作此用處的類。container container fluid 2.bootstrap柵格系統 bootstrap提供了一套響應式 移動...
響應式布局與Bootstrap
bootstrap的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說，相容性 多，工作量大，對瀏覽器來說，載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...
響應式布局之Bootstrap
1.響應式開發原理 使用 查詢針對不同寬度的裝置進行布局和樣式設定，從而達到適配不同的裝置的目的。2.響應式布局容器 響應式需要乙個父級作為布局容器，來配合子級元素來實現變化效果。原理就是在不同螢幕下，通過 查詢來改變這個布局容器的大小，再改變裡面自級元素的排列方式和大小，從而實現不同螢幕下不同的頁...