【51CTO專稿】HTML5與CSS3已經當仁不讓的成為了這兩年Web界最火爆的詞，他們似乎在HTML4和CSS2統治了Web很多年之后的某一天突然爆發，然后一直占據著所有Web開發者的視野。HTML5本身就是一個很大很寬泛的詞，在嚴格的意義上，HTML5代表***版本的HTML語義標準，而完全放開來看，HTML5代表了Open Web所包含的所有技術，HTML全新的語義，CSS3樣式單和JavaScript腳本所組合而成的開放的Web世界。

任何事情都有兩面性，HTML5的寬泛含義開拓了Web開發的視野，增加了開發方案的多樣性，同時也帶給很多Web開發者不小的困惑，就是HTML5在涉及到Web某個應用領域的開發時，到底代表了什么？本篇文章的目的就在于跟大伙分享HTML5,CSS3在移動Web應用開發上的概念和特點，這個概念就是“Responsive Web Design - 響應式Web設計"。Web設計師還在幾年前的時候,PC屏幕是作為Web內容的唯一載體，很多Web制作者也傾向于使用固定的頁面寬度(fixed width)來盡可能的保證Web頁面在不同分辨率的屏幕瀏覽器內得到一致的體驗，例如，標準的Dreamweaver里的1000x620的空白模版（頁面內容寬度為960的fixed類型）,這樣，不論用戶用1024,1280還是1600分辨率的顯示器瀏覽頁面時，都會看到一個相對一樣的頁面外觀。但是時至今日，隨著智能手機和智能平板設備的迅速流行，隨著移動互聯網數據流量大幅增長，Web頁面制作者們發現原有的Web設計布局方式越來越不合時宜。在移動設備相對較小的屏幕上瀏覽Web內容和在PC顯示器上的瀏覽體驗已經完完全全地不同了。這時候，HTML5和CSS3為所有Web開發者帶來了一種全新的Web內容的設計開發方案，那就是今天本文的中心：“Responsive Web Design - 響應式Web設計”。顧名思義，通過使用HTML5和CSS3的合理搭配，使得Web內容可以在很多種不同的設備屏幕上以自動適配的方式出現在瀏覽器內，從而給用戶帶來更好的體驗。

本篇文章將從以下幾個方面來圍繞討論響應式Web設計：

• 定義移動設備的Web設計，接著定義何為響應式Web設計，同時分享幾個成功案例。
• 了解設備屏幕視圖和分辨率的差異性
• HTML5和CSS3所能解決的基礎性問題

最近3年，除了移動互聯網的日漸強大，另一個伴隨而生的問題就是瀏覽器在PC和移動設備上的爭奪也日漸激烈，下圖是國內2012年12月的瀏覽器份額統計。

上圖擺在Web開發者面前的一個***的問題就是，如何才能保證Web制作的內容，盡可能的滿足這么多瀏覽器的兼容性問題。接下來的圖表數據來自gs.statcounter.com，是過去一年來全球來自移動設備和桌面瀏覽器的數據對比。

這張圖里的數據不難看出，桌面瀏覽器的份額每個月都在走低，而移動設備瀏覽器所帶來的增長則是顯而易見的，每個Web開發者都不能忽視那將近15%的用戶群體。所以，響應式設計這個概念的提出，對每個旨在移動設備和桌面上交付***的Web內容體驗的前端開發者都非常重要，它不僅解決的是瀏覽器兼容性的問題，更著重于解決不同設備上的內容瀏覽體驗的問題。

沒有經過響應式設計考量的網站，在移動設備的瀏覽器上雖然可以縮小整個網站的版面，維持原有PC屏幕適配的排版布局，但是這樣的網頁內容***的一個問題是，通過手機或pad瀏覽器瀏覽網站的內容，會不間歇的使用Zoom in和Zoom out操作來縮放內容或不斷的上下左右調整視圖(viewport)區域內的內容以可供瀏覽。而這樣的頻繁操作所造成的負面影響是巨大的，那就是用戶會變的抓狂，且不會長時間的瀏覽這樣的Web站點，造成網站用戶流失率不斷加大。下面是我本人在iPhone4S上通過safari瀏覽器打開的2個站點的截圖，在iPhone屏幕上看到的是和PC上一模一樣的首頁布局，站點還未進行過針對用戶設備而自動適配內容的優化，很顯然，沒有響應式設計的考量會“勸退”很多網站的瀏覽者。

而經過響應式設計考量的Web站點則提供給用戶更好的體驗，無論用戶是通過PC終端還是移動設備打開的站點。下面兩圖分別是作者通過iPhone4S的Safari瀏覽器直接輸入域名后出現的站點，網站很顯然檢測到了用戶來自手機瀏覽器，進而自動切換至合適的頁面布局來滿足用戶的瀏覽要求。這無疑是響應式Web設計***的優點之一。

響應式Web設計(responsive web design)的術語最早由Ethan Marcotte在2010年的一篇文章中提出，該文章的網頁地址是：http://www.alistapart.com/articles/responsive-web-design/。因此狹義的responsive web design在上面Ethan的文章中被定義由三個部份組成，靈活的單元格布局(flexible grid layout)，靈活的圖像(flexible images)，媒體及對應的媒體查詢(media and media queries）。而隨著HTML5和CSS3的出現，響應式web設計在更多前端開發者的認知中被廣義的認定為流暢的設計，彈性的布局設計，易于改變的布局設計，可自動適配的布局設計，跨設備跨平臺的web設計等等。

文章接下來的部份就談談在開始響應式Web設計前，一個前端交互設計師應該使用何種工具，我這里簡單的羅列一下。

#p#

創作的Web內容時，前端交互開發者經常使用瀏覽器來運行測試。下面幾種主流瀏覽器的尺寸檢測預覽插件可以很好的幫助我們：

• Internet Explorer Developer Tools，下載地址：

  http://www.microsoft.com/en-us/download/details.aspx?id=18359

• Safari下非常強大的Web頁面尺寸瀏覽擴展Resize，下載地址：

  http://resizesafari.com/

• Firefox下的Web頁面尺寸瀏覽擴展工具Firesizer，安裝地址：

  https://addons.mozilla.org/en-US/firefox/addon/firesizer/

• Google Chrome下Web頁面尺寸瀏覽擴展工具Window Resizer,安裝地址：

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/related

可以根據自己使用不同的瀏覽器來下載對應的擴展，這樣在創建響應式Web頁面時，你可以隨時通過上面這些擴展來預覽Web內容。

前端交互設計師和開發者還可以通過下列工具來在設計開發時創建不同的分辨率下的Web頁面，它們分別是：

• Adobe Dreamweaver CS6，這個老牌的工具***的版本***集成了JQueryMobile框架和一個非常友善的Fluid Grid Layout可視化工具，可以完全應對響應式Web設計的內容開發。下面的截圖就是Dreamweaver CS6的Fluid Grid Layout功能。

• Adobe Muse.Adobe Muse提供給網站架構師和前端交互設計師一個可視化的響應式Web設計的應用界面，可以在網站的藍圖規劃設計階段就納入響應式Web設計的考量。下面是Adobe Muse在創作響應式Web設計時的相關截圖。

• Adobe Edge Code Preview.這是一個非常犀利的前端代碼編輯器，通過它，前端開發者能夠快速地編寫HTML，CSS和JavaScript代碼。目前它是一個輕量級，支持代碼高亮，結構化瀏覽的不錯選擇，由于它基于開源項目改造，所以，開發者能夠為它打造很多定制化的插件。由于目前該工具還處于Preview版本，因此還有一些不足和待改進的方面，但是已經不難看出這是一款不錯的Web前端代碼編輯工具。

以上的幾款工具，開發者均可以通過在免費注冊為Adobe創意云(http://t.cn/zYYGZfj)的用戶獲得Dreamweaver CS6可以獲取30天的試用版本，而Adobe Muse和Adobe Edge Code均免費可以下載。

當然，響應式Web設計的前端開發工具非常之多，比如AptanaStudio,SublimeText，TextMate，BBEdit等等都是優秀的代碼編輯工具，而這些工具也都能夠很好的和Dreamweaver CS6和Muse一起配合使用。

繼續討論響應式Web設計，不得不提兩個部分的支持，分別是CSS3和Media Query。我們先從CSS3入手，CSS3是在CSS2.1定義規范核心上的改動，目前CSS3最終的specification還未最終定稿，但是這并不妨礙我們使用CSS3來支持響應式Web設計的相關工作。使用CSS3時，要注意由于目前市場占有率仍然很高的IE6,7,8這三個版本會無法支持CSS3的很多新特性，所以，我們應當謹慎使用使用CSS3的Experimental特性，而應該考慮使用對CSS2.1向下兼容的CSS特性。如果你的Web內容就是為了呈現HTML5***特性所帶來的效果的話，則可以不用有這種顧慮。下面這個網頁（http://ie.microsoft.com/testdrive/html5/borderradius/default.html）是一個CSS3在其幾個新屬性上的變化演示：

如果你熟悉CSS2.1實現上述效果使用的Slide door設置左右PNG圖片填充的手段，就會發現CSS3的革命性：***，無需在CSS3屬性中設置HTTP對圖片的請求方式，第二，屬性值的靈活調整，可以靈活的應對各種形狀的要求，減少工作量；第三，允許追加指定瀏覽器兼容性，例如對CSS屬性值添加-webkit-,-moz-,-chrome-之類的前綴，但是隨著W3C對CSS3規范的日益完善，值得高興的是，前端開發者設定這樣的特殊兼容性的工作越來越少。關于CSS3在響應式Web上的諸多新特性，我會在以后其他文章里來專門討論這部份內容。

   Media Query是響應式Web設計開發工作中，另外一個要必須掌握的技術，目前Media Query在瀏覽器上的兼容度要高很多，Firefox,Safari,Chrome,Opera,iOS Safari,IE等主流瀏覽器都能很好的支持Media Query。CSS3 Media Query模塊是目前在特定移動設備上開發Web應用樣式所必需的技術，比如如何訪問移動設備屏幕可視窗口的寬度(viewport width)屬性，開發者必須使用CSS3 Media Query。Media Query從技術成份上分析，其組成是比較簡單的，是由一個媒體類型和若幹個檢測判斷設備媒體功能的表達式所組成，對應不同的設備，通過執行Media Query的判斷檢測來實現對特定屬性的準確訪問。我們可以通過下面的截圖來簡單了解一下Media Query的表達方式。

上圖的部份紅色下劃線標注的部份是CSS3 Media Query表達式，主要通過對屏幕viewport最小分辨率的判斷來附加不同的CSS樣式單。下面用一個更直觀的例子來說明Media Query的作用。

將這個CSS文件link到一個HTML5的頁面，用IE9或Chrome24等新版瀏覽器打開頁面，當我們手動縮放瀏覽器窗口大小時，會發現隨著窗口的縮放，頁面的背景顏色起了變化，這就是響應式Web設計里最簡單的一個演示，隨著瀏覽器viewport尺寸的改變，media query響應Web頁面后呈現了不同的色彩。其實，CSS3 Media Query在HTML5頁面中的作用就是與瀏覽器交互，從瀏覽器得到對應的True/False結果后，執行特定的CSS3樣式加載，例如：

<link rel="stylesheet" media="screen and (orientation: landscape) and 
 
(min-device-width: 800px), projection" href="landscape-screen.css" /> 

上面這段CSS3的link代碼中media屬性就是通過Media Query和瀏覽器做交互的表現形式，通過and來做“與”判斷后，加載對應的CSS文件。

   毫無疑問，CSS3和Media Query的配合當下就能提供給響應式Web設計良好的支持，滿足用戶在open web的全新環境下為跨屏幕，跨設備的內容瀏覽需求。本文介紹了HTML5，CSS3在響應式Web設計的大環境下的相關概念，其重要性和開發者所需要的幾個基礎制作工具。在以后的文章中，將有機會深入討論響應式Web設計在技術上的各方面的細節。