【前端】響應式媒體查詢

時間 2019-12-11

標籤前端響應媒體查詢简体版

原文原文鏈接

響應式媒體查詢css

媒體查詢

　　從 CSS 版本 2 開始，就能夠經過媒體類型在 CSS 中得到媒體支持。若是您曾經使用過打印樣式表，那麼您可能已經使用過媒體類型。清單 1 展現了一個示例。android

清單 1. 使用媒體類型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

　　在清單 1 中，media 屬性定義了應該用於指定每種媒體類型的樣式表：web

　　screen 適用於計算機彩色屏幕。瀏覽器

　　print 適用於打印預覽模式下查看的內容或者打印機打印的內容。app

　　做爲 CSS 3 規範的一部分，能夠擴展媒體類型函數，並容許在樣式表中使用更精確的顯示規則。媒體查詢是評估 True 或 False 的一種表達。若是爲True，則繼續使用樣式表。若是爲False，則不能使用樣式表。這種簡單邏輯經過表達式變得更增強大，使您可以更靈活地對特定的設計場景使用自定義的顯示規則。框架

　　媒體查詢包含一個媒體類型，後跟一個或多個檢查特定條件（如最小的屏幕寬度）的表達式。樣式表中的媒體查詢看起來如清單 2 中的示例所示。iphone

清單 2. 媒體查詢規則
@media all and (min-width: 800px) { ... }

　　根據清單2中的標記，全部最小水平屏幕寬度爲 800 像素的屏幕（屏幕和打印等）都應使用以下 CSS 規則。該規則在示例中省略號所在的地方。對於該媒體查詢：ide

　　@media all 是媒體類型，也就是說，將此 CSS 應用於全部媒體類型。函數

　　(min-width:800px) 是包含媒體查詢的表達式，若是瀏覽器的最小寬度爲 800 像素則會告訴瀏覽器只運用下列 CSS。工具

　　請注意，在清單 2 中，能夠省略關鍵詞 all 和 and。在將某個媒體查詢應用於全部媒體類型時，會省略 all。後面的 and 也是可選的。

　　使用簡寫語法從新編寫媒體查詢，如清單 3 所示。

清單 3. 簡寫語法
@media (min-width:800px) { ... }

　　媒體查詢也能夠包含複雜表達式。例如，若是您想要建立一個僅在最小寬度爲 800 像素且最大寬度爲 1200 像素時應用的樣式，則須要按照清單 4 中的規則來作。

清單 4. 複雜表達式
@media (min-width:800px) and (max-width:1200px) { ... }

　　在您的表達式中，您能夠根據本身的喜愛使用任意數量的 and 條件。若是您想要增長其餘條件來檢查特定的屏幕方向，只需添加另外一個 and 關鍵詞，後跟 orientation 媒體查詢，如清單 5 所示。

清單 5. and 條件
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

　　清單 5 中的媒體查詢僅在寬度爲 800 到 1200 像素且方向是縱向時才能激活。（一般，方向僅對可以輕易轉換縱橫模式的智能手機和平板電腦上是有意義的。）若是其中一個條件爲 False，則沒法應用媒體查詢規則。

　　and 關鍵詞的反義詞是 or 關鍵詞。和 and 同樣，這些條件組合在一塊兒會構成複雜表達式。若是其中有一個條件爲 True，那麼整個表達式或分離的兩個條件都會爲 True，如清單 6 所示。

清單 6. or 關鍵詞
@media (min-width:800px) or (orientation:portrait) { ... }

　　若是寬度至少是 800 像素或方向是縱向的，則會應用該規則。

　　另外一個保存在詞庫中的媒體查詢關鍵詞是 not。位於媒體查詢的開始處，not 會忽略結果。換句話說，若是該查詢原本在沒有 not 關鍵詞的狀況下爲 true，那麼如今它將爲 false。清單 7 展現一個示例。

清單 7. 使用 not
@media (not min-width:800px) { ... }

　　僅從英文意思上理解，清單 7 中代碼的表示：當最小寬度不是 800 像素時，會應用下列 CSS 規則。這些示例只是將像素做爲媒體查詢中的測量單位，可是測量單位並不只限於像素。您可使用任何有效的 CSS 測量單位，好比釐米 (cm)、英寸 (in)、毫米 (mm) 等。

有用的媒體特性

　　媒體不少特性，好比寬度、顏色和網格，您能夠在媒體查詢中使用它們。對每一個可能的媒體特性進行描述不在本文討論範圍內。要設計響應式網站，只須要了解一些媒體特性：方向、寬度和高度。做爲一個簡單媒體特性，方向的值能夠是 portrait 或 landscape。這些值適用於持有手機或平板電腦的用戶，使您能夠根據兩個形狀因素來優化內容。當高度大於長度時，則認爲屏幕是縱向模式，當寬度大於高度時，則認爲屏幕是橫向模式。

　　清單 8 顯示了一個使用 orientation 媒體模式查詢的示例。

清單 8. orientation 媒體查詢
@media (orientation:portrait) { ... }

　　高度和寬度行爲十分類似，都支持以 min- 和 max- 爲前綴。清單 9 展現了一個有效的媒體查詢。

清單 9. 高度和寬度媒體查詢
@media (min-width:800px) and (min-height:400px) { ... }

　　若是沒有 min- 或 max- 前綴，您還可使用 width 和 height 媒體特性，如清單 10 所示。

清單 10. 不帶 min- 和 max- 前綴
@media (width:800px) and (height:400px) { ... }

　　當屏幕正好是 800 像素寬、400 像素高時，可使用清單 10 中的媒體查詢。現實中，像這樣的媒體查詢可能過於具體而不太有用。檢測精確維度是大多數網站訪問者都不可能遇到的一個場景。一般狀況下，響應式設計會使用範圍來執行屏幕檢測。

　　做爲媒體查詢大小範圍的後續內容，下一節將討論一些常見的媒體查詢，在設計一個響應式網站時，您可能會發現它們很是有用。

常見媒體查詢

　　由於 Apple 首次向市場推出了用戶智能手機和平板電腦產品，因此下列大多數媒體查詢都是基於這些型號的設備。

若是目標是橫向模式智能手機，則使用： @media (min-width: 321px) { ... }
若是目標是縱向模式智能手機，則使用： @media (max-width: 320px) { ... }
若是目標是橫向模式 Apple iPad，則使用： @media (orientation: landscape) { ... }
若是目標是縱向模式 iPad，則使用： @media (orientation: portrait) { ... }

SASS 中的媒體查詢

　　SASS 行爲中的媒體查詢與普通 CSS 中的徹底相同，但有一個例外：它們能夠嵌套在其餘 CSS 規則中。當一個媒體查詢嵌套在另外一個 CSS 規則中時，會將規則置於樣式表的頂層，如清單 11 所示。

清單 11. 嵌套的媒體查詢
#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

　　清單 11 中的示例將編譯到清單 12 的代碼中。

清單 12. 編譯結果
#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

組織你的媒體查詢

　　如今，咱們已經瞭解瞭如何編寫媒體查詢，是時候考慮採用以一種合乎邏輯的、有組織的方式將媒體查詢部署到您的 CSS 代碼中了。肯定如何組織媒體查詢很大程度上是一種我的偏好。這一小節將探討兩種主要方法的優勢和缺點。

　　第一個方法是爲不一樣屏幕大小指定徹底不一樣的樣式表。優勢是規則能夠保存在獨立樣式表中，這使得顯示邏輯可以清楚地劃分出來，更便於團隊進行維護。另外一個優點是源代碼分支之間的合併變得更爲容易。但優勢同時也是缺點。若是要爲每一個媒體查詢建立單獨的樣式表，則沒法將一個元素的全部樣式表放在同一文件夾的同一位置。當改變一個 CSS 中的一個元素時，須要建立多個位置進行查看，這使得網站 CSS 的維護變得更加困難。

　　第二個方法是在現有樣式表中使用媒體查詢，該樣式表就在定義其他元素樣式表的位置的旁邊。這種方法的優點是能夠將全部元素樣式保存在同一個位置。當在團隊模式下工做時，這種作法能夠建立更多源代碼合併工做，但這是全部基於團隊的軟件開發均可以管理且常見的一部分。

沒有所謂正確或錯誤方法。您只需選擇最適合您的項目和團隊的方法便可。

瀏覽器支持

　　到如今爲止，您可能已經相信 CSS 媒體查詢是一個強大的工具，並且想知道哪些瀏覽器支持 CSS 媒體查詢。如下是這方面的好消息和壞消息。

好消息是：大多數現代瀏覽器（包括智能手機上的瀏覽器）都支持 CSS 媒體查詢。

壞消息是：最近，來自 Redmond 的 Windows® Internet Explorer® 8 瀏覽器不支持媒體查詢。

　　對於大多數專業 Web 開發人員來講，這意味着您須要提供一個解決方案，以便在 Internet Explorer 中支持媒體查詢。下列解決方案是一個名爲 respond.js 的 JavaScript polyfill。

帶有 respond.js 的 Polyfill

　　Respond.js 是一個極小的加強 Web 瀏覽器的 JavaScript 庫，使得本來不支持 CSS 媒體查詢的瀏覽器可以支持它們。該腳本循環遍歷頁面上的全部 CSS 引用，並使用媒體查詢分析 CSS 規則。而後，該腳本會監控瀏覽器寬度變化，添加或刪除與 CSS 中媒體查詢匹配的樣式。最終可以在本來不支持的瀏覽器上運行媒體查詢。

　　因爲這是一個基於 JavaScript 的解決方案，因此瀏覽器須要支持 JavaScript，以便運行腳本。該腳本只支持建立響應式設計所需的最小和最大width 媒體查詢。這並非適用於全部可能 CSS 媒體查詢的一個替代。

　　Respond.js 是您能夠選擇的諸多可用開源媒體查詢 polyfills之一。若是您以爲 respond.js 沒法知足您的需求，在進行一個小小的研究以後，您就會發現幾個替代方案。

@media媒體查詢判斷ipad和iPhone各版本

　　Media Queries這功能是很是強大的，他可讓你定製不一樣的分辨率和設備，並在不改變內容的狀況下，讓你製做的web頁面在不一樣的分辨率和設備下都能顯示正常，而且不會所以而丟失樣式。

/* 判斷ipad */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px){  
/* style */  
}  

/* ipad橫屏 */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : landscape){  
 /* style */  
 }  

 /* ipad豎屏 */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : portrait){  
 /* style */  
}  

/* 判斷iphone5 *//* 橫屏豎屏判斷方法與ipad同樣 */  
@media only screen  
and (min-device-width : 320px)  
and (max-device-width : 568px){  
 /* style */  
}  

/* 判斷iphone4-iphone4s *//* 橫屏豎屏判斷方法與ipad同樣 */  

@media only screen  
and (min-device-width : 320px)  
and (max-device-width : 480px){  
/* style */  
 }  

/* iphone5分辨率 */  
screen Width = 320px (css像素)  
screen Height = 568px (css像素)  
screen Width = 640px (實際像素)  
screen Height = 1136px (實際像素)  
Device-pixel-ratio:2  

/* iphone4-iphone4s分辨率 */  
screen Width = 320px (css像素)  
screen Height = 480px (css像素)  
screen Width = 640px (實際像素)  
screen Height = 960px (實際像素)  
Device-pixel-ratio:2

1、最大寬度Max Width

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

　　表示：當屏幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。

2、多個Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

　　表示：當屏幕在600px-900px之間時採用style.css樣式來渲染web頁面。

3、設備屏幕的輸出寬度Device Width

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

　　表示：iphone.css樣式適用於最大設備寬度爲480px，好比說iPhone上的顯示，這裏的max-device-width所指的是設備的實際分辨率，也就是指可視面積分辨率

4、not關鍵字

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

　　表示：not關鍵字是用來排除某種制定的媒體類型，換句話來講就是用於排除符合表達式的設備。

5、only關鍵字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />   
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

6、其餘

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

　　表示：另外還有使用逗號（，）被用來表示並列或者表示或，style.css樣式被用在寬度小於或等於480px的手持設備上，或者被用於屏幕寬度大於或等於960px的設備上。

媒體查詢判斷ipad和iPhone各版本

判斷ipad

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
/* style */
}

ipad橫屏

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
/* style */
}

ipad豎屏

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* style */
}

判斷iphone5 *//* 橫屏豎屏判斷方法與ipad同樣

@media only screen

 and (min-device-width : 320px)

 and (max-device-width : 568px){

/* style */

 }

判斷iphone4-iphone4s *//* 橫屏豎屏判斷方法與ipad同樣

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px){

/* style */

 }

iphone5分辨率

screen Width = 320px (css像素)

screen Height = 568px (css像素)

screen Width = 640px (實際像素)

screen Height = 1136px (實際像素)

Device-pixel-ratio:2

iphone4-iphone4s分辨率

screen Width = 320px (css像素)

screen Height = 480px (css像素)

screen Width = 640px (實際像素)

screen Height = 960px (實際像素)

Device-pixel-ratio:2

Bootstrap CSS3媒體查詢斷點

　　Bootstrap響應式設計，就是一個典型的媒體查詢CSS框架，它設定了某些媒體查詢節點，根據不一樣設備寬度，寫不一樣的斷點位置來作響應式查詢。

Bootstrap推薦的媒體查詢樣式以下：

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/ 
/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {  
}
 
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
}
 
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
 
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
 
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
 
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
 
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
 
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
 
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}
 
/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {  
}

　　Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。下面是Bootstrap媒體查詢的一些文檔，但願對你有所幫助。

簡介

　　柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工做原理：

「行（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 來建立。
若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。
柵格類適用於與屏幕寬度大於或等於分界點大小的設備，而且針對小屏幕設備覆蓋柵格類。所以，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備，而且針對小屏幕設備覆蓋柵格類。所以，在元素上應用任何 .col-lg-* 不存在，也影響大屏幕設備。

媒體查詢

　　在柵格系統中，咱們在 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) { ... }

柵格參數

	超小屏幕手機 (<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）
可嵌套	是
偏移（Offsets）	是
列排序	是

經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。

實例：從堆疊到水平排列

　　使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在」 .row 內。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

實例：流式佈局容器

　　將最外面的佈局元素 .container 修改成 .container-fluid，就能夠將固定寬度的柵格佈局轉換爲 100% 寬度的佈局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

實例：移動設備和桌面屏幕

　　是否不但願在小屏幕設備上全部列都堆疊在一塊兒？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-*和 .col-md-*。請看下面的實例，研究一下這些是如何工做的。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
 
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

實例：手機、平板、桌面

　　在上面案例的基礎上，經過使用針對平板設備的 .col-sm-* 類，咱們來建立更加動態和強大的佈局吧。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

實例：多餘的列（column）將另起一行排列

　　若是在一個 .row 內包含的列（column）大於12個，包含多餘列（column）的元素將做爲一個總體單元被另起一行排列。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

響應式列重置

　　即使有上面給出的四組柵格class，你也難免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的狀況。爲了克服這一問題，建議聯合使用 .clearfix 和響應式工具類。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
 
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

　　除了列在分界點清除響應，您可能須要 重置偏移, 後推或前拉某個列。請看此柵格實例。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

列偏移

　　使用 .col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

嵌套列

　　爲了使用內置的柵格系統將內容再次嵌套，能夠經過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的.col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Less mixin 和變量

　　除了用於快速佈局的預約義柵格類，Bootstrap 還包含了一組 Less 變量和 mixin 用於幫你生成簡單、語義化的佈局。

變量

　　經過變量來定義列數、槽（gutter）寬、媒體查詢閾值（用於肯定合適讓列浮動）。咱們使用這些變量生成預約義的柵格類，如上所示，還有以下所示的定製 mixin。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

mixin

　　mixin 用來和柵格變量一同使用，爲每一個列（column）生成語義化的 CSS 代碼。

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();
 
  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
 
  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}
 
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}
 
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}
 
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

實例展現

　　你能夠從新修改這些變量的值，或者用默認值調用這些 mixin。下面就是一個利用默認設置生成兩列布局（列之間有間隔）的案例。

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。