響應式 Web 設計，是 Web 開發最佳實踐之一，其目標在于適應各類設備不同尺寸的屏幕，比如各類手機、平板、桌面設備。
引子
最近一周，在 前端結構 已確定 JS immy 框架情況下，下一步如何向前推進就成了一個新問題。
基于之前開發過程中遇到的問題，希望選擇合適的 UI 框架，對以下問題的解決有所幫助：
1. 設備尺寸適配問題；
2. 兼容性問題（IE8+）;
3. 交互動畫實現問題；
借助于框架解決大部分（比如90%）的問題，實在要緊的地方為達成最佳效果可以輔助以個別調整，包括文案調整；
為此，開發團隊與設計師不斷討論設計層面的變革問題，以及在支持當前市場推廣條件下如何持續調整代碼問題；
初步建議
- 原工程支持市場推廣，持續改進；
- 新開工程，支持引入 Bootstrap；
- 以手機首頁和 PC 首頁為典型案例；
- 模塊共享，后端共享，支持多站點發布；
- 在 1-3 周內，快速躍遷到響應式設計上來；
響應式布局（Responsive layouts）
這是 google developers 上關于 Responsive layouts 的一篇文章，作者 Pete LePage，最近他走在 Progressive Web App（PWA）方向上（The fundamentals of building PWA，PWA #FullStackCon）；
-
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">； -
使用相對寬度值
遵循上下滾動慣例；避免橫向滾動的糟糕體驗；使用相對寬度：width: 100%； -
媒體查詢
優先使用 min-width，而非 min-device-width；
使用相對單位（Use relative units）； -
選擇斷點（breakpoints）
以更好地適應小屏幕、大屏幕，以及中間屏幕； -
設計模式
大致可歸類為五種：mostly fluid、column drop、layout shifter、tiny tweaks 和 off canvas，是由 Luke Wroblewski 在 2012 年 Multi-Device Layout Patterns 的文章中分類歸納的。
More
- w3schools 示例
- Ethan Marcotte in A List Apart 2010
- Responsive Web Design by Ethan Marcotte，a book apart.
- Using CSS flexible boxes @ mozilla
- Can I Use：CSS + HTML5 + SVG + JS API 的支持度查詢
- Responsive web design @ wikipedia
- Unobtrusive JavaScript @ wikipedia
- 漸進增強（progressive enhancement） @ wikipedia，優于 graceful degradation；
內容-》表現-》行為，由內而外；從適配最小環境開始，漸進到最佳環境，逐漸增強，以相對最小代價，獲取相對最好結果； - CSS filter；
