什麼叫做響應式佈局？

也即是響應式Web設計。響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

響應式佈局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，隨著現在各種終端的快速發展，做出一些能夠適應不同分辨率、不同平台、不同屏幕大小的網頁尤為重要，這不僅使得自己的網站適應不同終端的能力更強，同時也為用戶帶來了良好的體驗。而且隨著目前大屏幕移動設備的普及，用大勢所趨來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

怎樣實現響應式佈局？

對於這個問題，我們可以通過CSS3中的Media Query來實現，即媒介查詢。媒體查詢讓CSS可以更精確作用於不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用於表達”大於或等於”和”小與或等於”。如：width會有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。通過這個標籤屬性，我們可以很方便的在不同的設備下實現豐富的界面，特別是移動設備，將會運用更加的廣泛。

首先我們要允許網頁寬度自動調整

在網頁代碼的頭部，加入一行viewport元標籤：

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

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。 下面通過Media Query我們可以得到不同設備屏幕的寬和高，從而我們就可以分別處理了。根據不同的設備屏幕寬度，設置不同的CSS。那麼這裡有兩種方法：

1、外聯樣式表
在這裡我們可以根據不同的設備載入不同的CSS樣式表

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

當頁面寬度大於等於960px時，載入樣式表gt-960px.css

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

當頁面寬度大於等於600px且小於等於960px時，載入樣式表gt-600px-lt-960px.css

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

當頁面寬度小於等於600px時，載入樣式表lt-600px.css

2、樣式表中內嵌法
當頁面寬度大於等於960px時

@media screen
and (min-width:960px){
    .header,
    .container,
    .footer{
        width:960px;
    }
    .sidebarLeft,
    .main,
    .sidebarRight{
        float:left;
        height:400px;
    }
    ...
}

當頁面寬度大於等於600px且小於等於960px時

@media screen
and (min-width:600px) and (max-width:960px){
    .header,
    .container,
    .footer{
        width:600px;
    }
    .sidebarLeft,
    .main{
        float:left;
        height:400px;
    }
    ...
}

當頁面寬度小於等於600px時

@media screen
and (max-width:600px){
    .header,
    .container,
    .footer{
        width:400px;
    }
    .sidebarLeft,
    .sidebarRight{
        width:400px;
        height:100px;
    }
    ...
}

請注意，我這裡還是用到了絕對寬度，如”width:400px;“，嚴謹地說，這還是不夠規範的，當然這還要看具體情況了，如果想完全響應式佈局的話，那麼就不能使用固定的寬度了，可以設為自動或百分比，如”width:auto;“或”width:xx%;“，另外字體也要設為百分比。

對於佈局來說，我們算是搞定了，但頁面中的圖片和視頻也不能忽視。

彈性圖片
我們需要為圖片設置max-width: 100%和height: auto，來實現其彈性化。

img {
    max-width: 100%;
    height: auto;
    width: auto9; /* ie8 */
}

彈性內嵌視頻
同樣，對於視頻我們也需要做max-width: 100%的設置；但是Safari對embed的該屬性支持不是很好，但我們可以用width: 100%來代替

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

好了，這大概就是我對響應式佈局的一些認識和個人觀點了，歡迎大家指正補充。

（此篇文章為網路轉載，如有冒犯，請來信告知，當即刻移除！）