HTML5、CSS3與響應式Web設計入門

討論響應式Web設計，不得不提兩個部分的支持，分別是CSS3和MediaQuery。我們先從CSS3入手，CSS3是在CSS2.1定義規范核心上的改動，目前CSS3最終的specification還未最終定稿，但是這并不妨礙我們使用CSS3來支持響應式Web設計的相關工作。使用CSS3時，要注意由于目前市場占有率仍然很高的IE6,7,8這三個版本會無法支持CSS3的很多新特性，所以，我們應當謹慎使用使用CSS3的Experimental特性，而應該考慮使用對CSS2.1向下兼容的CSS特性。如果你的Web內容就是為了呈現HTML5最新特性所帶來的效果的話，則可以不用有這種顧慮。下面這是一個CSS3在其幾個新屬性上的變化演示：
如果你熟悉CSS2.1實現上述效果使用的Slidedoor設置左右PNG圖片填充的手段，就會發現CSS3的革命性：靠前，無需在CSS3屬性中設置HTTP對圖片的請求方式，第二，屬性值的靈活調整，可以靈活的應對各種形狀的要求，減少工作量；第三，允許追加指定瀏覽器兼容性，例如對CSS屬性值添加-webkit-,-moz-,-chrome-之類的前綴，但是隨著W3C對CSS3規范的日益完善，值得高興的是，前端開發者設定這樣的特殊兼容性的工作越來越少。關于CSS3在響應式Web上的諸多新特性，我會在以后其他文章里來專門討論這部份內容。
MediaQuery是響應式Web設計開發工作中，另外一個要必須掌握的技術，目前MediaQuery在瀏覽器上的兼容度要高很多，Firefox,Safari,Chrome,Opera,iOSSafari,IE等主流瀏覽器都能很好的支持MediaQuery。CSS3MediaQuery模塊是目前在特定移動設備上開發Web應用樣式所必需的技術，比如如何訪問移動設備屏幕可視窗口的寬度(viewportwidth)屬性，開發者必須使用CSS3MediaQuery。MediaQuery從技術成份上分析，其組成是比較簡單的，是由一個媒體類型和若幹個檢測判斷設備媒體功能的表達式所組成，對應不同的設備，通過執行MediaQuery的判斷檢測來實現對特定屬性的準確訪問。我們可以通過下面的截圖來簡單了解一下MediaQuery的表達方式。
上圖的部份紅色下劃線標注的部份是CSS3MediaQuery表達式，主要通過對屏幕viewport最小分辨率的判斷來附加不同的CSS樣式單。下面用一個更直觀的例子來說明MediaQuery的作用。
將這個CSS文件link到一個HTML5的頁面，用IE9或Chrome24等新版瀏覽器打開頁面，當我們手動縮放瀏覽器窗口大小時，會發現隨著窗口的縮放，頁面的背景顏色起了變化，這就是響應式Web設計里最簡單的一個演示，隨著瀏覽器viewport尺寸的改變，mediaquery響應Web頁面后呈現了不同的色彩。其實，CSS3MediaQuery在HTML5頁面中的作用就是與瀏覽器交互，從瀏覽器得到對應的True/False結果后，執行特定的CSS3樣式加載，例如：上面這段CSS3的link代碼中media屬性就是通過MediaQuery和瀏覽器做交互的表現形式，通過and來做“與”判斷后，加載對應的CSS文件。
毫無疑問，CSS3和MediaQuery的配合當下就能提供給響應式Web設計良好的支持，滿足用戶在openweb的全新環境下為跨屏幕，跨設備的內容瀏覽需求。本文介紹了HTML5，CSS3在響應式Web設計的大環境下的相關概念，其重要性和開發者所需要的幾個基礎制作工具。在以后的文章中，將有機會深入討論響應式Web設計在技術上的各方面的細節。企業網站建設常見問題