HTML五、CSS3與響應式Web設計入門(2)

HTML5的寬泛含義開拓了Web開發的視野，增長了開發方案的多樣性，同時也帶給不少Web開發者不小的困惑，就是HTML5在涉及到Web某個應用領 域的開發時，到底表明了什麼？本篇文章的目的就在於跟大夥分享HTML5,CSS3在移動Web應用開發上的概念和特色，這個概念就是 「Responsive Web Design - 響應式Web設計"。

創做的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設計在技術上的各方面的細節。