Responsive Web Design，加油！

响应式 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
  ；
• 使用相对宽度值
  遵循上下滚动惯例；避免横向滚动的糟糕体验；使用相对宽度：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；