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

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

本篇文章將從以下幾個方面來圍繞討論響應(yīng)式Web設(shè)計：

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

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

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

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

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

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

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

文章接下來的部份就談?wù)勗陂_始響應(yīng)式Web設(shè)計前，一個前端交互設(shè)計師應(yīng)該使用何種工具，我這里簡單的羅列一下。

#p#

創(chuàng)作的Web內(nèi)容時，前端交互開發(fā)者經(jīng)常使用瀏覽器來運行測試。下面幾種主流瀏覽器的尺寸檢測預(yù)覽插件可以很好的幫助我們：

• 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

可以根據(jù)自己使用不同的瀏覽器來下載對應(yīng)的擴展，這樣在創(chuàng)建響應(yīng)式Web頁面時，你可以隨時通過上面這些擴展來預(yù)覽Web內(nèi)容。

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

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

• Adobe Muse.Adobe Muse提供給網(wǎng)站架構(gòu)師和前端交互設(shè)計師一個可視化的響應(yīng)式Web設(shè)計的應(yīng)用界面，可以在網(wǎng)站的藍圖規(guī)劃設(shè)計階段就納入響應(yīng)式Web設(shè)計的考量。下面是Adobe Muse在創(chuàng)作響應(yīng)式Web設(shè)計時的相關(guān)截圖。

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

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

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

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

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

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

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

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

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

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

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