響應式網頁設計

響應式網頁設計，這個概念在國外相當火熱。不管是互動設計，視覺，前端開發都投入到這個老意識新概念的技術當中。歡迎大家閱讀！更多相關資訊請關注相關欄目！

響應式網頁設計1

首先我們看下什麼是響應式網頁設計。它為使用者從他們的電腦切換到iPad、iPhone、黑莓、HTC、平板電腦等等，該網站能自動切換適應的解析度，影象大小和指令碼。換句話說，該網站能自動響應使用者的喜好。通俗點說法就是有求必應的網頁！

它不僅僅是一種趨勢，而是一個新的設計解決方案！它有助於解決不同的解析度和裝置（臺式電腦，膝上型電腦，平板，手機）相關的設計問題。

前面說了，其實這個是一個設計問題，既然是設計的問題，這裡就會涉及到很多層面的角色，包括互動設計師，視覺設計師，前端工程師，後臺開發工程師。互動設計師，要滿足各自不通解析度和裝置的頁面佈局展現方式。而視覺設計師，則要考慮到頁面效能和移動端頻寬問題，權衡下頁面的酷炫效果和視覺色彩的.運用。而前端和後臺開發工程師，則要完成滿足視覺需求和互動功能，更要考慮到頁面載入效能和消耗頻寬問題，更重要的是移動端安全效能方面！

下面我們來做一個簡單的響應式網頁。Demo預覽

大家可以用Chrome縮小下瀏覽器視窗看看頁面佈局是如何變化的。當然，你通過手機來檢視頁面佈局效果更佳。

我們做響應式網頁，首先必須要滿足桌面各個瀏覽器版本下正常顯示頁面。其次才考慮以webkit為核心的手機終端瀏覽器效果。由於IOS和Android瀏覽器都是webkit核心的，這裡的響應我們就不考慮ie9以下版本的瀏覽器了。

這個例子我們是以GDC部落格為原型。它預設一個固定寬度為980px的網頁，當瀏覽器視窗比980px小的時候，這個佈局就變為100%比寬度的液態佈局，而不是固定寬度。當瀏覽器視窗再縮小於650px的時候，我們就隱藏側邊欄。當視窗小於480的時候，橫向導航條隱藏，換成點選下拉效果的導航條。

響應式網頁設計2

如上圖，從左至右依次為移動版本—>平板電腦—>桌面瀏覽器的效果。

首先，我們來看下html結構

響應式網頁設計3

這個是一個很典型的部落格模版結構。一個wrapper容器包含了頭部、內容、側欄、底部。