【前端】響應式媒體查詢

来源:http://www.cnblogs.com/dragonir/archive/2017/08/09/7329320.html
-Advertisement-
Play Games

響應式媒體查詢 媒體查詢 從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支持。如果您曾經使用過列印樣式表，那麼您可能已經使用過媒體類型。清單 1 展示了一個示例。 清單 1. 使用媒體類型 <link rel="stylesheet" type="text/css" href= ...


響應式媒體查詢

媒體查詢

　　從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支持。如果您曾經使用過列印樣式表，那麼您可能已經使用過媒體類型。清單 1 展示了一個示例。

清單 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 屬性定義了應該用於指定每種媒體類型的樣式表：

　　screen 適用於電腦彩色屏幕。

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

　　

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

 

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

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

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

　　@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

 

一、最大寬度Max Width   

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

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

 

二、多個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頁面。 

 

三、設備屏幕的輸出寬度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所指的是設備的實際解析度，也就是指可視面積解析度 

 

四、not關鍵字 

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

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

 
五、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" />

 

六、其他

<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>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 基於Flume的日誌收集系統方案參考
    前言 本文將簡單介紹兩種基於Flume的日誌收集系統可能的架構方案，可根據不同的實際場景參考使用。 方案一 示例圖如下： 說明： 每個日誌源（http上報、日誌文件等）對應一個Agent-c用於收集對應日誌, 收集來的日誌可以流到Agent-s-1或Agent-s-2； Agent-c的Sink處理 ...
  • .NET Core 實踐：事件通知和非同步處理
    首先讓我們來先看一個例子： 這是一個簡單的用戶下單購買商品的業務模型，輸入端是用戶，相關物料有訂單和貨物，相關的內部服務有業務（訂單）、財務（支付）、倉儲（備貨）和物流（運輸）。 從圖中我們可以看到，用戶首先向業務部門下了一個訂單，業務部門根據用戶提供的內容生成了一份訂單給客戶，並要求客戶根據訂單金 ...
  • [小北De編程手記] Lesson 01 - AutoFramework構建 之 從一個簡單的Demo聊起
    寫在最前面 這個系列的主旨是要跟大家分享一下關於自動化測試框架的構建的一些心得。這幾年，做了一些自動化測試框架以及團隊的構建的工作。過程中遇到了很多這樣的同學，他們在學習了某一門語言和一些自動化測試的類庫或者工具之後，打算進一步的提高。我想這個系列也許會幫助到你，我們一起從各個維度來看一看自動化測試 ...
  • 前端_basic
    web： 分三部分：1、HTML；2、CSS；3、JavaScript。 1、HTML：用來構建網頁的結構和內容； 2、CSS：用來給網頁化妝，美化網頁； 3、JavaScript：用來讓網頁呈現動態的數據和效果。 重點： JavaScript： 1）java程式員使用js來實現網頁的業務邏輯； 2 ...
  • 響應式網站和自適應網站區別
    1、自適應網站 自適應網站源碼特征： （1）寬度百分比佈局 （2）文字rem（em）設置大小 展示形式：自適應是為瞭解決如何才能在不同大小的設備上呈現同樣的網頁，網站的內容和佈局是沒有變的。 2、響應式網站 最著名的是前端框架bootstrap（http://v3.bootcss.com/css/） ...
  • JavaScript易錯知識點整理
    前言 本文是我學習JavaScript過程中收集與整理的一些易錯知識點，將分別從變數作用域，類型比較，this指向，函數參數，閉包問題及對象拷貝與賦值這6個方面進行由淺入深的介紹和講解，其中也涉及了一些ES6的知識點。 JavaScript知識點 1.變數作用域 上方的函數作用域中聲明並賦值了a，且 ...
  • js學習總結----移動端概述和hybird模式
    移動端、H5、響應式佈局、webApp、場景應用、微信二次開發... 都是一個意思 1、首先先介紹一些基本概念 移動端:運行在移動設備上的產品 移動設備:手機、平板、I Touch... 大家都知道我們做得產品大部分都只需要適配IOS系統和安桌系統即可 響應式佈局:在不同的設備上都能給予客戶最好的操 ...
  • RN在Android打包發佈App
    參考資料：http://www.jianshu.com/p/b8811669bcb6 RN在Android打包發佈App 1-：生成一個簽名密鑰你可以用keytool命令生成一個私有密鑰。在Windows上keytool命令放在JDK的bin目錄中（比如C:\Program Files\Java\j ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類