響應式Web設計（三）：響應式Web設計的方法

　　介紹完響應式Web的背景和概念以後，是時候該介紹具體的實現方法了，其實響應式Web設計的方法很簡單，就是利用CSS3的媒體查詢Media Queries和Viewport來解決問題的。

　　首先咱們一塊兒來看看Media Queries，這裏我只會對其作一個簡單的列舉介紹。（有興趣深刻的同窗能夠參考：http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2）

　　經過媒體查詢的設置，咱們能夠根據屏幕寬度、屏幕方向等各個屬性來加載不一樣場景下不一樣的CSS文件來渲染頁面的視覺風格。具體的使用方法有如下兩種：

• 經過link標籤：
  

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

  示例代碼表明當當前屏幕寬度小於479px的時候，加載testcssbywidth1.css文件來渲染頁面。
• CSS中直接設置：
  

  @media screen and (max-width:479px) {
      /* 具體的CSS屬性設置 */
  }

    對於Media Queries的一些經常使用屬性，只對經常使用的幾個作一個簡單列舉說明，其餘的屬性請各位自行查閱相關資料：

• width：描述終端設備顯示區域的寬度，接受max/min的前綴；
• height：描述終端設備顯示區域的高度，接受max/min的前綴；
• device-width：描述終端設備屏幕的寬度，接受max/min的前綴；
• device-height：描述終端設備屏幕的高度，接受max/min的前綴；
• orientation：描述終端設備處於橫屏仍是豎屏的狀態，取值分別爲：landscape/portrait。

    當咱們調整瀏覽器大小的時候，上面經過媒體查詢屬性的操做就能夠完成響應式Web設計的工做，可是這卻不能知足移動終端的瀏覽器，由於移動瀏覽器默認頁面是爲寬屏幕設計的，因此會把他縮小來適應小屏幕，可是終端設備卻沒法識別正確的寬度，因此光靠媒體查詢是解決不了移動終端設備的響應式Web設計的。這個時候就必須使用viewport的meta標籤來作一系列的設置，一樣，下面我只給出一個簡單列舉說明，有興趣的同窗能夠參考一些網上資料進行深刻性的研究。

　　正常咱們須要響應式Web設計的頁面，在頁面中都要加上viewport的設置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

• width=device-width：控制viewport的寬度，能夠指定固定的值或者特殊的值，如device-width（設備寬度）。可是這個麼設置有一個弊端，由於這個設置只有在豎屏狀態下有效，橫屏狀態下，返回的卻仍是和豎屏狀態下同樣的寬度。
• initial-scale=1.0：告訴瀏覽器初始化頁面時不要對頁面進行任何縮放的操做。
  maximum-scale=1.0：告訴瀏覽器阻止頁面放大，可是這樣一來也禁止了用戶手動放大或縮小頁面，怎麼說呢，美好的東西也會存在缺陷吧。
• minimum-scale=1.0：告訴瀏覽器阻止頁面縮小，一樣帶來上面的問題。
• user-scalable=no：告訴瀏覽器禁止頁面縮放。
• target-densitydpi=device-dpi：分辨率的設置，一般能夠取值：device-dpi（使用設備自身的dpi做爲目標dp，不發生縮放）、high-dpi（使用高分辨率，中低分辨率場景下會相應縮小）、medium-dpi（使用中等分辨率，高低分辨率分別進行相應的放大和縮小，缺省值）、low-dpi（使用低等分辨率，中高分辨率相應放大）。

      經過對viewport的設置，利用Media Queries的屬性設置，你就能夠作出響應式的Web頁面。下面開始一步一步告訴你響應式Web設計怎麼開始的：

• 容許網頁寬度自動調整：

    就是在網頁的中追加viewport meta的定義。

• 選取一個標準開發出具體頁面：

    好比一個頁面被要求對屏幕寬度爲320px、480px、640px的三種場景下進行響應式設計，這個時候正常會選取320px下的標準先進行頁面開發。

• 抽取最低標準下的CSS樣式獨立成外鏈樣式文件：

    將320px下的CSS樣式所有抽取成外鏈樣式文件，響應式設計的頁面HTML代碼中，不要有任何CSS定義的代碼。

• 根據UEDMMs的視覺稿進行其餘標準的CSS樣式文件開發。
• 經過Media Queries屬性設置來定義不一樣場景下加載不一樣的CSS樣式文件。

     經過以上幾步以後，OK，你的第一個響應式Web設計的頁面就正式完成了，那麼下面就要開始測試了，固然你能夠很老實的用每一種終端設備來進行測試，固然這個是有必要的，可是爲了立刻就能看到響應式設計的效果，我推薦一個工具（http://dfcb.github.io/Responsivator/）給你，試試吧，你會以爲頗有快感的。

　　爲何如今這麼不少網站都選擇響應式Web設計呢？主要優點我的感受有如下幾個方面：

• 給用戶更好的視覺呈現：

    不一樣的屏幕下頁面的呈現方式不同，這樣能夠給不一樣終端的用戶不一樣的視覺體驗。

• 下降開發的成本：

    響應式Web設計相對於定製開發仍是APP開發，不管是從開發資源投入、開發工時等各個方面都節省了很多，正所謂省時省力省錢，何樂而不爲呢？

• 入口只有一個：

    無論你用什麼終端訪問網頁，URL都是一個。