響應式網頁設計
首先我們看下什么是響應式網頁設計。它為用戶從他們的電腦切換到iPad、iPhone、黑莓、HTC、平板電腦等等，該網站能自動切換適應的分辨率，圖像大小和腳本。換句話說，該網站能自動響應用戶的喜好。通俗點說法就是有求必應的網頁！
它不僅僅是一種趨勢，而是一個新的設計解決方案！它有助于解決不同的分辨率和設備（臺式電腦，筆記本電腦，平板，手機）相關的設計問題。
前面說了，其實這個是一個設計問題，既然是設計的問題，這里就會涉及到很多層面的角色，包括交互設計師，視覺設計師，前端工程師，后臺開發工程師。交互設計師，要滿足各自不通分辨率和設備的頁面布局展現方式。而視覺設計師，則要考慮到頁面性能和移動端帶寬問題，權衡下頁面的酷炫效果和視覺色彩的運用。而前端和后臺開發工程師，則要完成滿足視覺需求和交互功能，更要考慮到頁面加載性能和消耗帶寬問題，更重要的是移動端安全性能方面！
下面我們來做一個簡單的響應式網頁。Demo預覽
大家可以用Chrome縮小下瀏覽器窗口看看頁面布局是如何變化的。當然，你通過手機來查看頁面布局效果更佳。
我們做響應式網頁，首先必須要滿足桌面各個瀏覽器版本下正常顯示頁面。其次才考慮以webkit為內核的手機終端瀏覽器效果。由于IOS和Android瀏覽器都是webkit內核的，這里的響應我們就不考慮ie9以下版本的瀏覽器了。
這個例子我們是以GDC博客為原型。它默認一個固定寬度為980px的網頁，當瀏覽器窗口比980px小的時候，這個布局就變為100%比寬度的液態布局，而不是固定寬度。當瀏覽器窗口再縮小于650px的時候，我們就隱藏側邊欄。當窗口小于480的時候，橫向導航條隱藏，換成點擊下拉效果的導航條。
響應式網頁設計2
如上圖，從左至右依次為移動版本—>平板電腦—>桌面瀏覽器的效果。
首先，我們來看下html結構
響應式網頁設計3
這個是一個很典型的博客模版結構。一個wrapper容器包含了頭部、內容、側欄、底部。
【響應式網頁設計】相關文章：
響應式網頁設計技巧10-09
響應交互式網頁設計06-29
響應式網頁設計的工具有哪些10-09
自適應設計與響應式網頁設計的區別07-14
15個優秀響應式網頁設計教程08-23
響應式網站該如何設計10-16
勸導式網頁設計建議08-25
淺析網頁設計中的“馬云式”風格06-22
網頁設計靈動布局之相對自由式示例08-29