Responsive Design ------響應式設計

標籤：

什麼是響應式設計呢？維基百科是這樣對響應式作的描述：“Responsive設計簡單的稱為RWD，是精心提供 各種裝置都能瀏覽網頁的一種設計方法，RWD能讓你的網頁在不同的裝置中展現不同的設計風格。”從這一點描述來說，RWD不是流體布局，也不是網格布局， 而是一種獨特的網頁設計方法。

響應式設計要考慮元素布局的秩序，而且還需要做到“有求必應”，那就需要滿足以下三個條件：網站必須建立靈活的網格基礎；引用到網站的圖片必須是可伸縮的；不同的顯示風格，需要在Media Queries上寫不同的樣式。

要想靈活的使用Responsive，僅滿足這幾個條件還是不夠的，我們必須對Responsive有一個全面的瞭解，那麼要瞭解Responsive，就得先瞭解他的一些術語：

1.流體網格

流體網格是一個簡單的網格系統，這種網格設計參考了流體設計中的網格系統，將每個網格格子使用百分比單位來控制網格大小。這種網格系統最大的好處是讓你的網格大小隨時根據螢幕尺寸大小做出相對應的比例縮放。

2.彈性圖片

彈性圖片指的是不給圖片設定固定尺寸，而是根據流體網格進行縮放，用於適應各種網格的尺寸。而實現方法是比較簡單，一句代碼就能搞定的事情。

img {max-width:100%;}

不幸的是，這句代碼在IE8瀏覽器存在一個嚴重的問題，讓你的圖片會失蹤。當然彈性圖片在響應式設計中如何更好的實現，到目前為止都還存在爭議，也還在不斷的改善之中。

為每一個斷點提供不同的圖片，這是一個比較頭痛的事情，因為Media Queries並不能改變圖片“src”的屬性值，那有沒有辦分法可以解決呢？可以參考一下下面的解決方案。使用background-image給元素使用背景圖片，顯示/隱藏父元素，給父元素使用不同的圖片，然後通過Media Queries來控制這些圖片顯示或隱藏。

來看一個斷點解決圖片自適應的例子。

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg"  />

對應的CSS代碼：

@media (min-device-width:600px){img[data-src-600px]{  content: attr(data-src-600px,url);  }}@media (min-device-width:800px){  img[data-src-800px] {  content:attr(data-src-800px,url);  }}

 請注意：這僅僅是解決響應式圖片自適應的一種思路，但這種方案僅僅適配的斷點較少。並不太實用，此處僅為擴充同學們的思路。3.媒體查詢

媒體查詢在CSS3中得到了強大的擴充。使用這個屬性可以讓你的設計根據使用者終端裝置適配對應的樣式。這也是響應式設計中最為關鍵的。可以說 Responsive設計離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢可以根據裝置的尺寸，查詢出適配的樣式。Responsive設計最關注的就是：根據使用者的使用設 備的當前寬度，你的Web頁面將載入一個備用的樣式，實現特定的頁面風格。

 

4.螢幕解析度

螢幕分辨簡單點說就是使用者顯示器的解析度，深一點說，螢幕解析度指的是使用者使用的裝置瀏覽您的Web頁面時的顯示螢幕的解析度，比如說智能手機瀏覽 器、行動電腦瀏覽器、平板電腦瀏覽器和案頭瀏覽器的解析度。Responsive設計利用Media Queries屬性針對瀏覽器使用的解析度來適配對應的CSS樣式。因此螢幕解析度在Responsive設計中是一個很重要的東西，因為只有知道Web 頁面要在哪種解析度下顯示何種效果，才能調用對應的樣式。

5.主要斷點

主要斷點，在Web開發中是一個新詞，但對於Responsive設計中是一個很重要的一部分。簡單的描述就是，裝置寬度的臨界點。在Media Queries中，其中媒體特性“min-width”和“max-width”對應的屬性值就是響應式設計中的斷點值。簡單點說，就是使用主要斷點和次 要斷點，建立媒體查詢的條件。而每個斷點會對應調用一個樣式檔案（或者樣式代碼），如所示：

的style.css樣式檔案運用在Web頁面中，但這個樣式檔案包括了所有風格的樣式代碼，也就是說所有裝置下顯示的風格都通過這個樣式檔案下載下來。當然，在實際中還可以使用另一種方法，也就是在不同的斷點載入不同的樣式檔案，如所示。

主要顯示的是主要斷點，主要斷點載入的不同樣式檔案直接將影響Web的效果。除了主要斷點之外，為了滿足更多效果時，還可以在這個基礎上添次要斷點。不過主要斷點和次要斷點增加之後，需要維護的樣式也相應的增加，成本也相對應的增加。因此在實際使用中，需要根據自身產品需求，決定斷點。

綜合下來，設定斷點應把握三個要點：滿足主要的斷點；有可能的話添加一些別的斷點；設定高於1024的案頭斷點。

 

Responsive布局技巧通過上面的介紹，大家對響應式設計有了一定的瞭解，但在實際製作中還是有一些布局技巧的：

在Responsive布局中，可以毫無保留的丟棄：

第一， 盡量少用無關緊要的div；

第二，不要使用內嵌元素（inline）；

第三，盡量少用JS或flash；

第四，丟棄沒用的絕對位置和浮動樣式；

第五，摒棄任何冗餘結構和不使用100%設定。

有舍才有得，丟棄了一些對Responsive有影響的東東，那麼有哪些東東能協助Responsive確定更好的布局呢？

第一，使用HTML5 Doctype和相關指南；

第二，重設好你的樣式（reset.css）；

第三，一個簡單的有語義的核心布局；

第四，給重要的網頁元素使用簡單的技巧，比如導覽功能表之類元素。

使用這些技巧，無非是為了保持你的HTML簡單乾淨，而且在你的頁面配置中的關鍵區段（元素）不要過分的依賴現代技巧來實現，比如說CSS3特效或者JS指令碼。

說了這麼多，怎麼樣的布局或者說HTML結構才是簡單乾淨的呢？這裡教大家一個快速測試的方法。你首先禁掉你頁面中所有的樣式（以及與樣式相關的資訊），在瀏覽器中開啟，如果你的內容排列有序，方便閱讀，那麼你的這個結構不會差到哪裡去。

 

Responsive設計——meta標籤

 

最後還有一個不可或缺的東東，那就是meta標籤，可以說，在響應式設計中如果沒有這個meta標籤，你就是蹩腳的，響應式設計就是空談。

個meta標籤被稱為可視地區meta標籤，其使用方法如下。

<meta name=”viewport” content=”” />

在content屬性中主要包括以下屬性值，用來處理可視地區。

在實際項目中，為了讓Responsive設計在智慧型裝置中能顯示正常，也就是瀏覽Web頁面適應螢幕的大小，顯示在螢幕上，可以通過這個可視地區的meta標籤進行重設，告訴他使用裝置的寬度為視圖的寬度，也就是說禁止其預設的自適應頁面的效果，具體設定如下：

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

另外一點，由於Responsive設計是結合CSS3的Media Queries屬性，才能盡顯Responsive設計風格，但大家都清楚，在IE6-8中完全是不支援CSS3 Media。下面我們一起來看看CSS3 Meida Queries在標準裝置上的運用，大家可以把這些樣式加到你的樣式檔案中，或者單獨建立一個名為“responsive.css”檔案，並在相應的條件中寫上你的樣式，讓他適合你的設計需求。

指令碼： 

media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)       respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]>      <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> ?<![endif]>

Responsive設計——不同裝置的解析度設定

下面我們一起來看看CSS3 Meida Queries在標準裝置上的運用，大家可以把這些樣式加到你的樣式檔案中，或者單獨建立一個名為“responsive.css”檔案，並在相應的條件中寫上你的樣式，讓他適合你的設計需求：

1.1024px顯屏

@media screen and (max-width : 1024px) {                    /* 樣式寫在這裡 */          }     

2.800px顯屏

@media screen and (max-width : 800px) {              /* 樣式寫在這裡 */          }     

3.640px顯屏

@media screen and (max-width : 640px) {              /* 樣式寫在這*/            }     

4.iPad橫板顯屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              /* 樣式寫在這 */            }     

5.iPad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {         /* 樣式寫在這 */            }     

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              /* 樣式寫在這 */            }     

現在有關於這方面的運用也是相當的成熟，twitter的Bootstrap第二版本中就加上了這方面的運用。大家可以對比一下：

@media (max-width: 480px) { ... }              

@media (max-width: 768px) { ... }              

@media (min-width: 768px) and (max-width: 980px) { ... }      

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

 

 

 

 

 

 

 

 

 

 

 

Responsive Design ------響應式設計