網頁響應式設計簡介

　　隨着上網設備的推陳出新和技術的快速發展，用於顯示網頁的環境千差萬別。好比手機就有不少種的屏幕尺寸，同時，我的電腦顯示器也不斷在刷新分辨率的記錄。傳統的固定寬度（例如960像素）的網頁設計已經不能知足各種移動用戶瀏覽網頁的個性需求，因而響應式網頁設計孕育而生。

　　最先提出響應式網頁設計（Responsive Web Design）的是美國的 Ethan Marcotte，他將三種已有的開發技巧（媒體和媒體查詢、流式佈局、彈性圖片）整合起來，並給其命名。響應式網頁設計是能針對任意網頁設備對網頁內容進行完美佈局的一種顯示機制，能使網頁隨瀏覽設備的不一樣而自行響應，動態調整佈局結構和元素的規格樣式，將相同的內容以不一樣的佈局呈現給不一樣終端的用戶。

 

1、媒體查詢（media query）

　　媒體查詢是響應式網頁設計方法的核心。不過在細說媒體查詢前，先要說一下媒體類型。

　　在CSS2 中存在一個很是有用的媒體類型（media type）的功能，容許定義何種媒體來展現網頁。網頁能夠被顯示在顯示器、紙媒體或者聽覺瀏覽器等。經常使用的媒體類型有all和screen、print等。

　　媒體類型的幾種常見的使用方法以下：

方法一：

<link href="style.css" media="screen print" ... 

方法二：

@import url("style.css") screen;

方法三：

@media screen{ selector{rules} }

      

　　媒體查詢（media query）是css3 中對media type的加強，能夠當作是media type + css 屬性判斷，可讓css更加精確做用於不一樣媒體或同一媒體的不一樣條件。下面來講一下媒體查詢規則。

　　例如:  @media all and (min-width: 800px) { ... }

一開始的「@media all」其實就是媒體類型，表示做用於全部媒體。此處也能夠換成「@media screen」或者「@media print」等。「and」是關係詞，以後鏈接的是屬性條件，視口寬度最小爲800像素。最後大括號裏的就是css樣式，用戶能夠在此處寫在大於等於800像素時的做用樣式。

　　此處提到了「視口」這個概念，有必要在這裏解釋一下其與屏幕尺寸的關係。視口和屏幕尺寸不是同一個概念。視口是指瀏覽器窗口內的內容區域，不包含工具欄、標籤欄等。也就是網頁實際顯示的區域。屏幕尺寸指的是設備的物理顯示區域。須要注意的是有些瀏覽器調整工具顯示的尺寸包含瀏覽器的其餘元素，諸如地址欄、標籤欄和搜索欄，而有些工具則不是這樣。

　　關係詞 all 和 and等不是必選的。在將某個媒體查詢應用於全部媒體類型時，會省略 all。後面的 and 也是可選的。可使用簡寫語法從新編寫媒體查詢，以下

@media (min-width:800px) { ... }

若是用關係詞能夠實現比較複雜的媒體查詢效果。例如，若是您想要建立一個僅在最小寬度爲 640 像素且最大寬度爲 1366 像素時應用的樣式，就能夠寫成以下：

@media (min-width:640px) and (max-width:1366px) { ... }

若是您想要增長其餘條件來檢查特定的屏幕方向，只需添加另外一個 and 關鍵詞，後跟 orientation 媒體查詢：

@media (min-width:640px) and (max-width:1366px) and (orientation:portrait) { ... }

媒體查詢僅在寬度爲 640 到 1366 像素且方向是縱向時才能激活。

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

@media (not min-width:640px) { ... }

當最小寬度不是 640 像素時，會應用下列 CSS 規則。

　　媒體的特性有不少，但要設計響應式網站，只須要了解一些媒體特性：方向、寬度和高度。做爲一個簡單媒體特性，方向的值能夠是 portrait 或 landscape。這些值適用於持有手機或平板電腦的用戶，使您能夠根據兩個形狀因素來優化內容。

      

2、流式佈局

　　在認識到媒體查詢威力無比的同時，咱們也要看到它的侷限性。那些僅使用媒體查詢來適應不一樣視口的固定寬度設計，只會從一組CSS 媒體查詢規則突變到另外一組，二者之間沒有任何平滑漸變，並且會致使規則寬度範圍以外的頁面須要水平滾動才能完整瀏覽。爲了解決這個問題，咱們須要使用由百分比定義網頁寬度並設置樣式浮動的流式佈局。

　　流式佈局的特色之一就是百分比佈局。相比採用具體尺寸的佈局，百分比佈局在用戶縮放瀏覽器窗口時，不會出現內容被隱藏和出現橫向滾動條。Ethan Marcotte提供了一個簡易的公式：目標元素寬度÷父級元素寬度 = 百分比寬度。但須要注意的是，要保證元素的相鄰元素都是使用百分比定義寬度，這樣就能使頁面在任意尺寸的設備中以一致的佈局呈現。

　　流式佈局中，還有一種技術就是彈性盒佈局。已經被現代的瀏覽器支持。彈性盒佈局模型主要用於控制HTML元素之間的排列形式。在過去，CSS中用float控制元素的排列，人們須要經過大量的數值計算來確保元素的精確位置。彈性盒就是爲了幫助開發者快速精肯定位元素。好比要實現一個三列布局，中間是固定寬度，兩邊是自由縮放的。之前得用js配合作一些計算來不斷設置兩邊元素的寬度來達到縮放時保持三列布局。如今用彈性盒模型的css就能夠輕鬆實現。

 

3、彈性圖片

　　要讓圖片自適應縮放，通常使用css將圖片的寬度設置成100%，這樣就能使圖片在佈局中保持特定的比例。但隨着瀏覽器的縮放，當圖片的實際大小超過圖片自己的大小時，圖片就會變的模糊。有效的解決方案，就是及時替換成一張尺寸更大的圖片。這種方式也稱爲響應式圖片。

　　響應式圖片的思想是由Filament Group提出的，是指用戶代理根據輸出設備的分辨率不一樣加載不一樣類型的圖片，不會形成帶寬的浪費，同時，在改變輸出設備類型或分辨率時，能及時加載對應類型的圖片。 大體的原理是利用js腳原本檢測當前設備的視口大小，根據檢測結果來加載不一樣尺寸的圖片。目前國內外已有的一些js插件，都較好的實現了這個功能，但都各有利弊，在開發時需根據實際狀況選擇使用。除了用js以外，還有其餘的一些實現方式。

　　在此還要特別注意在Retina屏幕下，圖片爲了保持清晰，須要加載高清的圖片。在css4的草案中，對background-image定義了一種新的方法，image-set，能夠根據屏幕的不一樣像素密度比加載不一樣的圖片，例如：

#test {

  background-image: url(assets/no-image-set.png);

  background-image: -webkit-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);

  background-image: -moz-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);

  background-image: -o-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);

  background-image: -ms-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);

}

固然，也能夠採用媒體查詢的功能來判斷不一樣的像素密度比，如：

/* ------------- Retina ------------- */

@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */

       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 以前 */

       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */

       only screen and (min-resolution: 240dpi), /* 標準 */

       only screen and (min-resolution: 2dppx) /* 標準 */

{

#test {

  background-image: url(assets/test-hires.png);

}

}

 

　　與image-set解決背景圖片相對應的，img 元素中的srcset屬性則解決了高清屏下加載不一樣圖片的問題。例如：

<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px 2x">

但目前image-set和srcset並無成爲正式標準。支持的瀏覽器比較少。

 

　　說到這裏，關於響應式的一些關鍵技術其實已經說介紹完了。關鍵是在於對已有的這些技術的靈活運用。其優勢很是明顯：在不一樣終端、不一樣分辨率下有很強的匹配性；只需一套代碼，必定程度上節省了開發和維護的成本。 可是並非全部的網站都適合用響應式佈局，響應式佈局也不是萬能的。 響應式的缺點主要有：兼容各類設備工做量大，效率低下；代碼累贅，會出現隱藏無用的元素，加載時間加長；其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果。 因此若是預算充足，且對用戶體驗要求高的網站，作一個真正的「手機版」網站是首選。

　　固然，與響應式相關的技術發展纔剛剛開始，簡單並強大看似矛盾，其實從發展的角度來說並不矛盾，完美是人類不斷追求的目標。好比css3還沒正式發佈的時候，就已經有css4的身影了。響應式的問題也會在技術的不斷更迭中獲得很好的解決。