響應式設計（Responsive Design）無疑是當下最受關注的行業話題之一。所謂響應式設計，實質是網頁設計的一種方法，基于CSS3的媒介查詢特性使得網頁適應不同設備，即根據設備的分辨率和縮放自動重新布局使網頁適應各種不同的屏幕尺寸。隨著越來越多的用戶使用平板電腦和智能手機設備訪問互聯網，響應式設計這個概念空前白熱化。對于開發人員來說，做好響應式設計的一個關鍵就是事先設想到他們的信息可能會以哪些方式被瀏覽。關于響應式設計，有三個非常重要的理念你需要知道。

響應式設計不等同于移動設計

雖然響應式設計對于網頁在移動設備上的呈現是一門很炫的技術，但它并不只是移動設計。響應式設計涵蓋了一個網站的整個網頁設計。無可否認，響應技術能在移動設備上運行，甚至你還可以從移動設備上開始你響應式設計的第一關。然而，響應式設計遠不止此。作者認為，最好的響應式網站應該是可以在各種分辨率的桌面上查看，且在平板電腦和智能手機上也有相當驚艷的瀏覽效果。如果開發人員在響應式設計中只看重移動設備這一塊，那將錯失很多用戶體驗網站的機會。

好的SEO也應包括響應式設計

網站建設人員都很看重SEO，而響應式設計對于SEO有很大的幫助。使用響應式設計你的網站會有更靠前的排名，還能避免內容重復。進行響應式設計和SEO最簡單的方法就是參考Google瀏覽器。

Google支持智能手機優化網站這三種配置：

• 使用響應式網頁設計，同一組URL能在所有設備上查看，每個URL在所有設備上的HTML都是一樣的，僅使用CSS來改變網頁在設備上的呈現。這是Google推薦的配置。
• 同一組URL能在所有設備上查看，但這些URL在不同設備上的HTML（和CSS)是不同的，取決于是在臺式機上還是移動設備上。
• 對于移動設備和桌面平臺有不一樣的URL。

網格——你的終極武器

早在出版業問世時，使用網格來進行頁面設計就已經興起了。網格解決一個基本的對齊問題。作者認為，最好的響應項目應該是能夠基于任何一個百分比按比例擴展或縮放而保持像素不變。在這里，作者建議從網站最多被瀏覽的寬度來開始你的響應式設計。多數響應式網格包括三種不同的瀏覽器寬度：768像素及以上、480×768像素， 320×480像素。一些開發人員也選擇其他的寬度，如1000像素以上的，以支持桌面的寬屏顯示器。如今，無論分辨率多大，流體背景都可用來填充任何屏幕的剩余空間。對于流體網格，選擇也不只幾種，開發人員可以依據情況選擇最適合的。

最后，對于響應式設計，作者推薦Twitter推出的Bootstrap和ZURB推出的Foundation，它們算得上是時下最先進的響應式框架，開發人員可以借助這些優秀的開發框架進行網站設計。

>>擴展閱讀：

10個超棒的響應式Web設計工具

什么是響應式網頁設計？有哪些好用的第三方響應式框架？

2013年流行的網頁設計趨勢