響應式設計(Response Web Design)實踐

最後更新：2013-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前一篇響應式設計(Response Web Design)淺談提到了響應式設計的由來和應用情境。本文聊一聊如何?。

如何讓自己的網站也響應式Web設計，可以響應裝置的解析度呢? 根據Ethan Marcotte的文章，和相關的實踐，已經總結出了一些實踐方法。本文最後列出了所引用的文章和工具）響應式Web設計是想把固定的(Fixed)設定(位置定位，長寬大小)變為相對的(Relative)設定，其包括三個主要手段: Fluid Grid (流體表格), (Liquid Image) 液態圖片, (Css3 media queries) 媒體選取器。

Fluid Grid (流體表格)

在流體表格之前主要使用960px寬度來設定頁面的寬度，因為當時主流的案頭解析度是1024X768, 960px寬度可以充分的使用1024px的寬度同時又不會使使用者感覺頁面過滿。隨著螢幕解析度的不斷變大，演化出了960Grid http://www.designinfluences.com/fluid960gs/）960Grid可以佔據頁面適度的寬度，同時隨著頁面寬度的變化進行重新排布，流體表格的定義： http://www.alistapart.com/articles/fluidgrids/

流體表格將頁面柵格化，使用em相對單位取代px絕對單位，em 是target ÷ context = result，最好使用em設定位置位移和字型大小，這樣可以使頁面配置和字型大小隨頁面寬度的變化而變化，從而適應頁面寬度的變化。同時使用div的float排布，如果要三列排布，將div設定為float:left; 四行排布:

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image002" border="0" alt="clip_image002" src="http://www.bkjia.com/uploads/allimg/131228/1314191949-0.jpg" height="373" />

不同解析度下的960Grid:

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image004" border="0" alt="clip_image004" src="http://www.bkjia.com/uploads/allimg/131228/1314193913-1.jpg" height="383" />

600X800 的960Grid

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image006" border="0" alt="clip_image006" src="http://www.bkjia.com/uploads/allimg/131228/131419B56-2.jpg" height="313" />

1280X768 的 960Grid

除了960Grid，還有1140Grid, Golden Grid System，等其它流體表格架構。

1. Fluid 960 Grid System http://www.designinfluences.com/fluid960gs/

2. 1140 CSS Grid System http://cssgrid.net/

3. Golden Grid System http://goldengridsystem.com/

4. Frameless http://framelessgrid.com/

液態圖片 (Liquid Image)

流體表格提供了響應式的頁面配置，但如何響應圖片，解析度變化時，圖片如何友好顯示? 液態圖片(Liquid Image)使得圖片響應解析度變化，讓圖片不失真的縮放和背景裁剪，提供友好的顯示。Zoe Mickley Gillenwater的《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》基本上介紹了所有的液態圖片技巧，同時在他的Blog上http://zomigi.com/blog/ 提供了很多關於建立流體表格和液態圖片的教程、資源、創意指導及最佳實務。在 Zoe的http://zomigi.com/blog/hiding-and-revealing-portions-of-images/ 中指出了是把圖片當成內容使用 img 標籤引入，還是圖片只是裝飾的判斷原則。

Does the image convey information that I ought to put as text in an alt attribute?
Do I want to make sure the image always prints because without it the
printout wouldn’t make sense or be complete?
Do I want to link the image?

If the answer to any of these questions is yes, the image is content and should be kept in the (X)HTML.

從當前實踐的情況來看，如果把圖片當成內容來處理，是不易進行縮放和裁剪的，也就不好響應解析度變化，但是如果把圖片當成裝飾(DOM的背景)來處理，就可以方便響應解析度變化，進行縮放或者裁剪。

如: Demo: http://www.zomigi.com/demo/crop_background.html

 
  div#background { 
   
  50%; 
   
  height: 330px; 
   
  background: url(styx.jpg) no-repeat right; 
   
  border: 2px solid #000; 
   
  }

簡單的background: url(styx.jpg) no-repeat right; right設定使得瀏覽器在縮小寬度時，對圖片裁剪:

裁剪前：

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image008" border="0" alt="clip_image008" src="http://www.bkjia.com/uploads/allimg/131228/1314192P0-3.jpg" height="348" />

裁剪後:

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image010" border="0" alt="clip_image010" src="http://www.bkjia.com/uploads/allimg/131228/13141950S-4.jpg" height="476" />

在http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/ 中給出了img width 的提示:

 
  img { 
   
  50%; 
   
  }

Demo: view-source:http://www.zomigi.com/demo/scale_liquid.html 圖片隨著Html Body寬度縮放。

 
  img { 
   
  20em; 
   
  max- 500px; 
   
  }

http://www.zomigi.com/demo/scale_elastic_max.html 圖片隨著字型大小縮放。

在http://zomigi.com/blog/creating-sliding-composite-images/ 中給出了max-width的提示:

 
  #outer { 
   
  position: relative; 
   
  100%; 
   
  max- 1000px; 
   
  height: 300px; 
   
  background: url(skyline.jpg) no-repeat; 
   
  } 
   
  #inner { 
   
  position: absolute; 
   
  top: 50px; 
   
  right: 50px; 
   
  100px; 
   
  height: 250px; 
   
  background: url(ufo.png) no-repeat; 
   
  }

Demo: http://www.zomigi.com/demo/composite.html 隨著寬度縮小，outer img 裁剪， inner img 向左移動，保持right 50px。

縮放前：

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image012" border="0" alt="clip_image012" src="http://www.bkjia.com/uploads/allimg/131228/1314192E8-5.jpg" height="186" />

縮放後：

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image014" border="0" alt="clip_image014" src="http://www.bkjia.com/uploads/allimg/131228/13141a021-6.jpg" height="367" />

Ethan Marcotte在http://unstoppablerobotninja.com/entry/fluid-images/ 中也說明了:img { max- 100%;} 的提示。

因為圖片已經經過響應式的Css設定，所以應該在iPhone及iPodTouch中，禁止圖片被自動縮放，Apple專有的meta標記可以解決這個問題。在頁面的<head>部分添加以下代碼(Think Vitamin的文章：http://thinkvitamin.com/design/responsive-design-image-gotcha/)：<meta name="viewport" content="; initial-scale=1.0">

將initial-scale的值設定為"1"，即可覆蓋預設的縮放方式，保持原始的尺寸及比例。

未設定initial-scale:

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image016" border="0" alt="clip_image016" src="http://www.bkjia.com/uploads/allimg/131228/1314194200-7.png" height="667" />

設定initial-scale 為1:

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image018" border="0" alt="clip_image018" src="http://www.bkjia.com/uploads/allimg/131228/131419B39-8.png" height="676" />

(Css3 media queries) 媒體選取器

流體表格提供了響應式的頁面配置，但是當在某種小解析度下，確實無法進行4行內容顯示了，需要變為3行內容顯示，或者2行，如何響應解析度，將原來的4行顯示平滑的變成3或者2行顯示呢？Css3 media queries( 媒體選取器)可以用來解決這個問題。

Css3 media queries 可以根據不同的解析度載入不同的Css。在Ethan Marcotte的 http://www.alistapart.com/articles/responsive-web-design/ 中給出了使用方法。 Demo: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html 在頁面寬度變化時，下方的圖片自動重排且圖片大小適中。

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image020" border="0" alt="clip_image020" src="http://www.bkjia.com/uploads/allimg/131228/1314194444-9.jpg" height="257" />

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image022" border="0" alt="clip_image022" src="http://www.bkjia.com/uploads/allimg/131228/1314191435-10.jpg" height="451" />

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image023" border="0" alt="clip_image023" src="http://www.bkjia.com/uploads/allimg/131228/1314194C9-11.png" height="896" />

 
  @media (max- 400px) { 
   
  .figure, 
   
  li#f-mycroft { 
   
  margin-right: 3.317535545023696682%; /* 21px / 633px */ 
   
  48.341232227488151658%; /* 306px / 633px */ 
   
  } 
   
  } 
   
  @media (min- 1300px){ 
   
  .figure, 
   
  li#f-mycroft { 
   
  margin-right: 3.317535545023696682%; /* 21px / 633px */ 
   
  13.902053712480252764%; /* 88px / 633px */ 
   
  } 
   
  }

Css3媒體選取器根據當前媒體的min-width來載入不同的li#f-mycroft樣式，從而設定width和maright-right,把原來最寬的單行布局變成了最窄的兩行布局。Css3媒體選取器除了寬度選擇還有很多其它的Media features, http://www.w3.org/TR/css3-mediaqueries/ 給出了介紹。

其它相關內容：

有了：流體表格，液態圖片,媒體選取器，頁面已經基本可以響應解析度變化了，但是就響應式Web設計這個話題來說它應該包括兩個方面的內容:

1. 響應螢幕解析度變化，解析度發生變化時，根據裝置解析度，調整菜單，圖片，文字，等其它頁面DOM的狀態和布局，使得頁面仍然可以為使用者提供友好的使用體驗。

2. 響應裝置原生行為變化，如：拖拽(iPad上使用JavaScript事件類比拖拽)，手勢支援，等其它行動裝置上特有的手勢輸入方式支援。

本文響應式 Web 設計，只針對1。

同一圖片，小解析度下可否只載入小圖，大解析度才載入大圖，可否不同解析度下提供不同尺寸大小的圖片，從而節省頻寬？使用媒體選取器及content屬性可以解決這一問題。

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image025" border="0" alt="clip_image025" src="http://www.bkjia.com/uploads/allimg/131228/1314192K9-12.jpg" height="180" />

 
  <img src="image.jpg" 
   
  data-src-600px="image-600px.jpg" 
   
  data-src-800px="image-800px.jpg" alt=""> 
   
  @media (min-device- { 
   
  img[data-src-600px] { 
   
  content: attr(data-src-600px, url); 
   
  } 
   
  } 
   
  @media (min-device- { 
   
  img[data-src-800px] { 
   
  content: attr(data-src-800px, url); 
   
  } 
   
  }

是否存在一個簡單的步驟，實現一個具備響應式的頁面配置？http://webdesignerwall.com/tutorials/responsive-design-in-3-steps 文中給出了一個3步實現響應式布局的例子。

布置頁面:

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image026" border="0" alt="clip_image026" src="http://www.bkjia.com/uploads/allimg/131228/1314193P1-13.png" height="439" />

設定媒體選取器:

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image027" border="0" alt="clip_image027" src="http://www.bkjia.com/uploads/allimg/131228/13141942M-14.png" height="260" />

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image028" border="0" alt="clip_image028" src="http://www.bkjia.com/uploads/allimg/131228/1314192333-15.png" height="260" />

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image029" border="0" alt="clip_image029" src="http://www.bkjia.com/uploads/allimg/131228/1314191144-16.png" height="249" />

實際頁面Demo: http://webdesignerwall.com/demo/responsive-design/index.html

使用上面的三個技術可以設計製作出一個響應式Web。從設計和實現的整體過程來說設計並實現一個響應式Web網站，可以經過下面4個過程:

1. 美工，使用者體驗師，勾畫出頁面的整體樣子，確定最大解析度下應該顯示的內容，在解析度不斷縮小的情況下，如何布局，什麼元素(菜單，圖片，內容)需要變化顯示方式，進行隱藏，縮放或者裁剪。

2. 使用相對尺寸進行定位和布局，使用相對尺寸設定長度，寬度，字型大小。

3. 使用流體表格和液體圖片響應解析度。

4. 由於解析度變化，根據需要變化顯示方式的元素，加入媒體選取器。

相關工具：

Respond.js(http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/) 讓IE6-8支援meidia queries

· Responsive Design Testing (http://mattkersley.com/responsive/)不同分辨下的測試載入器。

Resize My Browser (http://resizemybrowser.com/)瀏覽器縮放工具,不支援chrome,opera.
Media Query Bookmarklet (http://seesparkbox.com/foundry/media_query_bookmarklet) media query的書籤工具
ProtoFluid (http://protofluid.com/) 類比測試Web在各種主流裝置上的情況。
ScreenFly (http://quirktools.com/screenfly/ )和ProtoFluid類似
responsivepx (http://responsivepx.com/) 測試Web在不同解析度下的適應性

其中http://quirktools.com/screenfly/ 非常 cool，可以協助您類比測試Web在各種主流裝置上的情況：

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="clip_image031" border="0" alt="clip_image031" src="http://www.bkjia.com/uploads/allimg/131228/1314195a0-17.jpg" height="410" />

相關資源:

http://www.alistapart.com/articles/responsive-web-design/

http://www.designinfluences.com/fluid960gs/

http://cssgrid.net/

http://goldengridsystem.com/

http://framelessgrid.com/

http://www.qianduan.net/responsive-web-design.html

http://zomigi.com/blog/hiding-and-revealing-portions-of-images/

http://zomigi.com/blog/creating-sliding-composite-images/

http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/

http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/

http://unstoppablerobotninja.com/entry/fluid-images/

http://www.netmagazine.com/features/21-top-tools-responsive-web-design

http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design

http://iskeleton.blogspot.in/

http://www.lukew.com/ff/entry.asp?933

http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/

http://www.lukew.com/ff/entry.asp?1509

http://www.lukew.com/ff/entry.asp?1514

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More