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

本文轉載自查看原文 2012-06-07 16:47 7516 經驗分享

前一篇響應式設計(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;width:33%這樣當寬度變化時，這三個div也一直會在自己所在的block里排成三列。流體表格保證了頁面響應寬度變化，同時不出現橫向滾動條。在960Grid的Demo頁面里，第一行使用了width:23% 四行排布:

不同分辨率下的960Grid:

600X800 的960Grid

1280X768 的 960Grid

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

1. Fluid 960 Grid Systemhttp://www.designinfluences.com/fluid960gs/

2. 1140 CSS Grid Systemhttp://cssgrid.net/

3. Golden Grid Systemhttp://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 {

width: 50%;

height: 330px;

background: url(styx.jpg) no-repeat right;

border: 2px solid #000;

}

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

裁剪前：

裁剪后:

在http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/ 中給出了img width 的使用技巧:

img {

width: 50%;

}

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

img {

width: 20em;

max-width: 500px;

}

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

在http://zomigi.com/blog/creating-sliding-composite-images/ 中給出了max-width的使用技巧:

#outer {

position: relative;

width: 100%;

max-width: 1000px;

height: 300px;

background: url(skyline.jpg) no-repeat;

}

#inner {

position: absolute;

top: 50px;

right: 50px;

width: 100px;

height: 250px;

background: url(ufo.png) no-repeat;

}

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

縮放前：

縮放后：

Ethan Marcotte在http://unstoppablerobotninja.com/entry/fluid-images/ 中也說明了:img { max-width: 100%;} 的使用技巧。

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

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

未設置initial-scale:

設置initial-scale 為1:

(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 在頁面寬度變化時，下方的圖片自動重排且圖片大小適中。

@media (max-width: 400px) {

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /* 21px / 633px */

width: 48.341232227488151658%; /* 306px / 633px */

}

}

@media (min-width: 1300px){

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /* 21px / 633px */

width: 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屬性可以解決這一問題。

<img src="image.jpg"

data-src-600px="image-600px.jpg"

data-src-800px="image-800px.jpg" alt="">

@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);

}

}

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

布置頁面:

設置媒體選擇器:

實際頁面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在各種主流設備上的情況：