响应式 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；
