如今，web應用已經深入到我們生活的方方面面了。而你知道嗎?72%的使用者們都希望他們訪問的**不僅在台式電腦或筆記本上有賞心悅目的介面，同時也能適應移動裝置的螢幕。為此，身為設計師和工程師的我們必須緊抓這個潮流，走在前沿。達爾文教給世人最精準的四個字就是：適者生存。而響應式設計，憑藉著其靈活可變的特性以及一些其他因素，必定會被越來越多的設計師青睞，成為未來web開發的一大主流設計模式。
ethan marcotte，致力於推廣響應式設計的先驅者，指出響應式設計基本上包括三大元素：流體網格，自適應的**以及css3**查詢。簡言之，響應式設計是一種自適應的設計模式，能靈活地應對不同顯示裝置的解析度大小，像台式電腦，膝上型電腦，手機，平板電腦，平板手機，電子書等。
然而實現響應式設計並不是一件簡單的事。web設計師和工程師們常常面臨著**效能(主要是載入速度)，廣告，導航等多方面的挑戰。不過這些挑戰是設計過程中無可避免的一部分，也必將令響應式設計真正地變得賞心悅目和持久穩定。
可以看到的是，許多**都已紛紛投向了響應式設計的懷抱。下面我們不妨看看一些將響應式設計實際融入到網頁中的優秀作品吧。
在此之前，容我向您推薦一些響應式設計相關的法寶和乾貨：
靈活性: 響應式網頁設計的基礎
響應式設計的未來——flexbox
用於響應式設計的9個css技巧
16個幫助你高效測試響應式設計介面的工具
readlists
inbound
the boston globe
pixel crayons
abduzeedo
（需翻牆）
joomla
treehouse
bradfrostweb
2023年，輪到我們國內的設計師和工程師們大展身手，推動響應式設計的時候了。親們，請取長補短，讓自己做出來的**也有響應式的magic吧!
響應式網頁設計示例
若要全方位測試你自己或別人的響應式 則需要針對每一種裝置和不同的螢幕尺寸，分別準備不同的測試系統。儘管這是最完美的辦法，但通過改變瀏覽器視窗大小其實就可以完成大多數測試。除此之外，還有很多第三方外掛程式和瀏覽器擴充套件可供選擇，通過它們可以將當前瀏覽器視窗或視口設定為指定畫素。必要時，還可以自動將當...
響應式網頁設計初探
我首次接觸響應式網頁設計還要從應用bootstrap說起。我們運用bootstrap的網格類簡單的將響應式設計帶入我們的網頁設計當中，當然bootstrap框架其實還做了其他事情以支援網頁響應式設計。現在，就讓我們一窺響應式網頁設計背後的原理。實現響應式設計的前提 允許網頁縮放 視口的 meta 標...
iPhoneX響應式網頁設計
iphone x正式發售了。隨之而來的是乙個新的白色線條，幸福地坐在底部的觸控板上，它替代了原有的home鍵。這也喚起了人們對物理home鍵的懷舊情結。頂部的黑色凹槽採用了許多最先進的技術 紅外攝像頭 環境感應器 光感感測器等 所有這些都是用來支援面部識別的。iphone x 的頂部凹槽 這也意味著...