響應WEB概念在移動互聯網興起的初期，的確很火，它主要解決原PC網站樣式向移動端過渡的問題，以一套前端代碼適配PC、手機和其他顯示設備，以較小的代價實現網站產品的多維呈現。
我個人作為勉強的全棧，曾經選用過最熱的Bootstrap前端框架，開發過一些web應用。雖然后來，隨著移動端越來越成為重點實現方向，感到響應式網站設計，并不能為移動網站帶來優良的體驗和高開發效率，至少在我近幾年的項目中，面向移動端，已經完全放棄了響應式開發方法，采用了更純粹的移動前端框架，以適應不僅是web，還有APP、小程序的前端需求。
但是，并不能說響應式web設計落伍了，沒用了。根據項目特點，人員技術力量，選用最適合的方法，做最優秀的實現，是開發的實踐準則。
下面，圍繞實戰開發響應web的大致方法、流行的框架工具介紹、響應式的優缺點總結，展開一些敘述和討論。
什么是響應式網站設計？
響應式網頁設計 Responsive Web Design，從開發角度上講，就是使網頁能通過識別屏幕寬度、做出相應調整的網頁設計，它面向的設備是超寬屏幕、pc顯示器、平板電腦、手機。這里面大家很容易忽視超寬屏幕的設計，因為很多開發者為了簡化設計，往往在針對超寬屏幕只做居中處理。
實現原理
通過css樣式語言，有時候也會結合一些javascript，考量屏幕寬度，自動調整網頁顯示和布局，以適應不同尺寸屏幕的瀏覽優化體驗。
實現目標
最好的響應式設計，就是設計者開發出一套全端網頁，為電腦、手機、平板等不同終端的用戶提供更加舒適的界面和更好的交互體驗，比如手機端的觸摸和PC端鼠標操作效果。而且隨著目前大屏幕移動設備的普及，響應式開發方法還是有自己獨特的優勢。
響應式網站開發方法
布局
在構建響應式網站或改造舊網站成為響應式結構時，首先要考慮的就是布局。
主要是兩部分頁面元素：
延展全屏寬的元素，比如我們在PC貫穿全屏寬的元素，css: width:100%；
主內容塊的最大寬度定義，以下定義了4種常見分辨率的容器最大寬度；
@media (min-width: 576px) {
.container { max-width: 540px; }
}
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 992px) {
.container { max-width: 960px; }
}
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}
媒體元素寬度定義
下面的CSS代碼將確保圖片永遠不會比其父容器大：
img { max-width: 100%; height: auto; }
或者根據設備的分辨率不同，需要顯示不同size的圖片:
<img src=" image.jpg" alt="" data-src-600px=" image-600px.jpg" data-src-800px =" image-800px.jpg" />
這種彈性顯示媒體的方式，需要借助CSS或JS的方式實現。
版式（Typography）定義
這是響應式設計中最重要的部分，有很多響應式設計的排版方式需要注意，比如：
CSS3規范中包含了一個定義尺寸的元素rem。它的工作原理與em幾乎相同，但是rem的大小相對于html元素而言，這使得rem比em更容易使用。
html { font-size:100%; }
通過以下CSS代碼可以定義不同分辨率下的相對字體大小。
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }
最流行的響應式框架
使用前端框架可以提高前端開發的效率。通常框架已經為開發者搭好了腳手架，只需要在上面累加我們的特殊需求就可以了，這幫助碼農減少編碼工作量，并節省了寶貴的時間。
當前有各種各樣的響應框架可用，并且新仍在不停的進化更新。在眾多選擇中，選擇適合的框架是很困難的。下面列舉了幾個最流行的響應框架。
Bootstrap
Bootstrap是國內最流行、最快速、最友好的框架。這個框架是2011年由Twitter的開發者創建的。目前，整個網絡上有數百萬的網站都在運行這個神奇的框架。在GitHub他的追捧數量已經超過了100多K。
Bootstrap包括了HTML、CSS和JavaScript。你可以輕松地開發各種規模和復雜度的響應式網站。
Foundation
Foundation是一個企業級的前端框架。FaceBook、eBay、Mozilla、Adobe、HP、思科、迪士尼等都在他們的網站上使用這個框架。
它相當復雜，不適合新手使用。Foundation具有可讀性、靈活性、語義性和完全可定制性。Foundation自帶GPU加速功能，可實現閃電般的快速和流暢的動畫效果。它提供了Fastclick.js，可在移動設備上快速渲染。
Pure
非常輕的一個框架。該框架包含響應式CSS模塊，是為迎合移動市場而開發的。開發人員可以使用各種樣式、CSS模塊以及組件和可定制的工具來開發網站。
Semantic UI
SemanticUI是相對較新的框架，但它在很多方面都很突出。它已經成為非常流行的前端框架之一。它使用的是自然語言。
Semantic的性能記錄功能讓你可以追蹤到代碼的瓶頸，而無需深挖堆棧痕跡。使用Semantic，直觀的底層之上可以配備一個高級主題變量，讓您有充分的設計自由度。
Semantic UI集成了大量的第三方庫。因此整個開發過程會更容易一些。
響應設計的優點
響應式方式可以在臺式機，平板電腦或智能手機上構建流暢運行的web樣式設計 。它的實質是一種適配性的編碼設計，它具備很多優點：
- 開發維護一套前端響應式代碼，可以適配多種顯示設備。
- 只需要擁有一個入口網址，無須通過腳本，判斷瀏覽設備而重定向訪問，更不需要配置二級域名。
- 簡化SEO（搜索引擎優化），響應式設計，無需為移動版本創建特定的內容，這對SEO友好的。搜索引擎收錄的只是內容，而對網頁語言代碼毫無興趣。因此，谷歌百度在一段時期還建議優先考慮響應式設計。
- 有可能會節約開發成本？這一點我自己也很有疑惑，我個人認為如果是僅僅適配顯示的話，響應式設計的確可以節約成本，但精致的移動端交互設計，還是純移動框架最受用。
- 簡化網站推廣數據分析，無論來自什么入口，都一網打盡所有訪問數據。
響應設計的缺點
盡管響應式設計有很多優點，那么缺點應該被忽略嗎？事實并非如此。響應式網頁設計有一些需要注意的缺點。為了在一套體系框架下，去做各分辨率下的大小顯示適配、內容取舍，那種煎熬你體驗過嗎？
某些響應式網站的加載時間會更長。因為將加載一些不必要的HTML / CSS。例如，很多響應站點上的圖像只是在視覺上按比例縮小，而沒有采用媒體內容的彈性加載策略。
耗時的開發。對于響應式網站而言，這是一項耗時的任務。如果您打算將現有網站轉換為響應式網站，則可能需要更多時間。
響應式Web設計的流體布局，使設計人員難以很好地控制設計風格。設計人員正在嘗試分別針對移動和桌面布局顯示線框和設計原型。只有改進了這兩種布局，才能真正實現響應式Web設計策略。
- UX（用戶體驗）不佳。通過響應設計，您想要同時滿足臺式機和移動用戶的需求。但是，移動設備和臺式機畢竟是完全不同的用戶體驗。因此，有很大風險可能同時失去兩類用戶。
- 需要承受內容的取舍。排版的需要、推廣策略的不同、體驗的差異，造成移動版本的內容很可能與桌面版本的內容不一致。因此，采用響應式設計不可能使您的內容適應這些設備中的每一個，那么在一個頁面里用技術實現這種取舍，是很痛苦的。
寫在最后
選擇了開發，終會有學不動的那天，對于前端、后端、運維、全棧，都是一樣。某項技術熟練了，我們總希望它的生命周期長一點。如果有一天，對新技術的那種興奮感不再有的時候，做一個方向的了解者規劃者也是不錯的。
希望所有Coder身體健康，永遠快樂。