前言
總聽別人說響應式佈局，覺得是一個很高大上的東西，近日做的一個項目需要適配不同的屏幕尺寸，於是就簡單研究了一下 Web響應式佈局，其實原理很簡單，下面就簡單整理了一下分享給大家。
什麼是響應式佈局
[圖片來源 caktusgroup]
如圖就是響應式佈局的體現，簡單的說響應式佈局就是一個網站能夠兼容多個終端，而不是爲每個終端做一個特定的版本。這個概念隨着移動設備的興起而深入人心。 比如 頭條他做的就不是響應式佈局，他通過實時檢測設備信息，在 www.toutiao.com和 m.toutiao.com兩個網站之間切換。而最近比較火的開發者社區 segmentfault.com就是響應式佈局，頁面的佈局會會隨着你拖動瀏覽器窗口大小變化而變化。響應式佈局沒有絕對的話好與壞，需要根據網站的性質來確定，比如 toutiao的頁面元素非常多，頁面需要包括所有屏幕尺寸的樣式顯示不是很好操作，然而 segmentfault頁面元素較少，反而放在一起方便維護。
如何快速實現web響應式佈局
我們通過一個例子來具體說明，首先使用 @media關鍵字爲不同的屏幕尺寸設置不同樣式，關於 @media我們下文有更詳細的介紹
代碼片段：
<style type="text/css">
@media only screen and (min-width: 480px) {
.col-sm-6, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-6 {
width: 50%;
}
}
@media only screen and (min-width: 768px) {
.col-md-6, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-6 {
width: 50%;
}
}
</style>
<div class="container">
<div class="col-md-12 col-sm-12 row">
<div class="col-md-6 col-sm-12 col-1 col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-md-6 col-sm-12 col-2 col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>我們簡單解釋一下上述代碼片段 min-width指的是當屏幕尺寸大於當前值的時候樣式生效。 外層的 div包裹內層的兩個 div。 col-md-6col-sm-12當屏幕尺寸大於 768px的時候子 div寬度是父 div的一半，所以是並排。當屏幕尺寸大於 480px的時候子 div寬度和父 div的寬度一樣。下圖爲不同尺寸下的效果圖。
768px
480px
注意觀察的同學又發現問題了，圖二沒有辦法看啊，太小了吧。是的，我們的響應式還沒有做完，這個時候我們在 head裏面添加如下一行代碼再試試？那麼問題來了，圖一尺寸大於 768px不假，但是也大於 480px啊，那麼怎麼就按照 768px的尺寸排布了呢？這裏就涉及到了 CSS優先級： CSS 的基本優先級如下 （外部樣式）Externalstyle sheet<（內部樣式）Internalstyle sheet<（內聯樣式）Inlinestyle如果優先級一樣便有一個覆蓋原則，後面的覆蓋前面的，於是如例，當屏幕尺寸慢慢變大到 768px的時候，後者遍生效了。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
如圖神奇的一幕出現了：
width=device-width: 表示此寬度不依賴於原始象素(px)，而依賴於屏幕的寬度.這樣我們就大功告成了.如需要下載源碼請點擊，在線查看請點擊。想知道爲什麼 meta有這麼大作用請翻看下文。
Meta ViewPort 是什麼
手機瀏覽器是把頁面放在一個虛擬的“窗口”( viewport)中，通常這個虛擬的“窗口”( viewport)比屏幕寬，默認是把網頁擠到一個很小窗口以便全部預覽，這樣也不會破壞沒有適配手機佈局的網頁。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也逐步支持。我們如果做了手機屏幕尺寸的適配就可以手動調整 viewport，這樣就可以把網頁內容和手機佈局合理的展示給用戶。下面是具體參數的說明：
width | 設置layout viewport 的寬度，爲一個正整數，或字符串”width-device” |
initial-scale | 設置頁面的初始縮放值，爲一個數字，可以帶小數 |
minimum-scale | 允許用戶的最小縮放值，爲一個數字，可以帶小數 |
maximum-scale | 允許用戶的最大縮放值，爲一個數字，可以帶小數 |
height | 設置layout viewport 的高度，這個屬性對我們並不重要，很少使用” |
user-scalable | 是否允許用戶進行縮放，值爲”no”或”yes”, no 代表不允許，yes代表允許 |
Media Queries 詳解
中文叫做媒體查詢，它包含一個媒體類型(media type)和至少一個表達式，用媒體特性限制樣式表的作用範圍。下面我們直接通過例子對相對的關鍵字進行分析：
only
用於向早期瀏覽器隱藏媒體查詢，比如IE如果不支持的話直接忽略當前定義的樣式。和其他表達式一起用需要 and
@mediaonly screenand(min-width:400px)
screen
screen是一種 媒體類型，例中的 screen意思是僅支持彩色電腦顯示器。其他屬性如下： all：適用與所有設備 print：paged material and documents viewed on screen in print previe mode. screen: 彩色電腦顯示器 speech：intended for speech synthesizers
and
and是一種 操作符，表示被鏈接的表達式不許同時滿足，其他表達式如下： and：所有條件必須滿足 ,：只要滿足一種條件即可 not：條件的取反
min-width
min-width是 媒體特徵，他的意思是最小寬度滿足的時候就爲真，其他媒體特徵：
- width: viewport width
- height: viewport height
- aspect-ratio: viewport的寬高比如：16/9
- orientation: 寬度和高度的大小關係
- resolution: pixel density of the output device
- scan: scanning process of the output device
- grid: is the device a grid or bitmap
- color: number of bits per color component of the output device, or zero if the device isn’t color
- color-index: number of entries in the output device’s color lookup table, or zero if the device does not use such a table
總結
筆者只是隨學隨賣，拋磚引玉，如有想更深入理解 響應式佈局請觀看如下參考鏈接。