響應式設計

我們現實生活中所使用到的裝置有手機、平板電腦、筆記本、台式電腦。這些裝置最大的區別在於它的螢幕的大小不一樣，也就是解析度大小不一樣。

響應式設計最核心的思想是乙個**能夠相容多個終端，而不是為每個終端特定的乙個版本。

頁面的設計與開發應當根據使用者行為以及裝置環境（系統平台，螢幕尺寸、螢幕定向等）進行相應的響應和調整，具體的實踐方式由多方面決定，包括彈性網路布局、使用等。

為了確保適當的繪製和觸屏縮放，需要在之中新增 viewport 元資料標籤。

name
="viewport"
content
="width=device-width, initial-scale=1"
>

在移動裝置瀏覽器上，通過為視口（viewport）設定 meta 屬性為user-scalable=no可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓你的**看上去更像原生應用的感覺。注意，這種方式我們並不推薦所有**使用，還是要看你自己的情況而定！

包含了乙個響應式的、移動裝置優先的、不固定的柵格系統，可以隨著裝置或視口大小的增加而適當地擴充套件到 12 列。它包含了用於簡單的布局選項的預定義類，也包含了用於生成更多語義布局的功能強大的混合類。

讓我們來理解一下上面的語句。bootstrap 3 是移動裝置優先的，在這個意義上，bootstrap **從小螢幕裝置（比如移動裝置、平板電腦）開始，然後擴充套件到大螢幕裝置（比如膝上型電腦、台式電腦）上的元件和柵格。

•把網頁總寬度平分為12分，開發人員可以自由按分組合，以便開發出簡潔方便的程式

•僅僅通過定義容器大小、平分12分，再調整內外邊距，最後結合**查詢，就製作出強大的響應式柵格系統

•柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面布局，你的內容就可以放入這些建立好的布局中。

•「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。

•通過「行（row）」在水平方向建立一組「列（column）」。

•你的內容應當放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。

•類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速建立柵格布局。bootstrap 原始碼中定義的 mixin 也可以用來建立語義化的布局。

•通過為「列（column）」設定 padding 屬性，從而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為「行（row）」所包含的「列（column）」抵消掉了padding。

•負值的 margin就是下面的示例為什麼是向外突出的原因。在柵格列中的內容排成一行。

•柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來建立。

在柵格系統中，我們在 less 檔案中使用以下**查詢（media query）來建立關鍵的分界點閾值。

/* 超小螢幕（手機，小於 768px） */ /* 沒有任何**查詢相關的**，因為這在 bootstrap 中是預設的（還記得 bootstrap 是移動裝置優先的嗎？） */ /* 小螢幕（平板，大於等於 768px） */ @media (min-width :@screen-sm-min) /* 中等螢幕（桌面顯示器，大於等於 992px） */ @media (min-width :@screen-md-min) /* 大螢幕（大桌面顯示器，大於等於 1200px） */ @media (min-width :@screen-lg-min

)

我們偶爾也會在**查詢**中包含max-width從而將 css 的影響限制在更小範圍的螢幕大小之內。

@media
(max-width
:@screen-xs-max) 
@media
(min-width
:@screen-sm-min
) and (
max-width
:@screen-sm-max) 
@media
(min-width
:@screen-md-min
) and (
max-width
:@screen-md-max) 
@media
(min-width
:@screen-lg-min
)

通過下表可以詳細檢視 bootstrap 的柵格系統是如何在多種螢幕裝置上工作的。

超小螢幕手機 (<768px)

小螢幕平板 (≥768px)

中等螢幕桌面顯示器 (≥992px)

大螢幕大桌面顯示器 (≥1200px)

柵格系統行為

總是水平排列

開始是堆疊在一起的，當大於這些閾值時將變為水平排列c

.container最大寬度

none （自動）

750px

970px

1170px

類字首.col-xs-.col-sm-.col-md-.col-lg-

列（column）數

12最大列（column）寬

自動~62px

~81px

~97px

槽（gutter）寬

30px （每列左右均有 15px）

30px（每列左右均有15px）

30px （每列左右均有 15px）

可巢狀是是是

是偏移（offsets）是是

是是列排序是是是

是下面是 bootstrap 柵格的基本結構：

class
="container"
>
class
="row"
>
class
="col-*-*"
>
div>
class
="col-*-*"
>
div>
div>
class
="row"
>
...div
>
div>
class
="container"
>
....

讓我們來看幾個簡單的網格例項：

響應式設計

響應式設計

響應式設計

響應式設計

相關推薦