“屏幕尺寸越来越多，不同设备的交互特质也有着巨大的差别，我们希望我们的网站能够在移动手机、平板、桌面电脑，在键鼠、触摸、无障碍设备上都有优秀的用户体验。所以，我们需要网站的用户界面在不同的平台上有所不同。”
那么如何解决呢，一个解决方案应运而生：响应式设计 (Responsive Web design)

狭义上，我们把主要依靠前端 CSS （包括 Media Query 媒体查询，百分比流式布局，网格与Typography系统……）来对各种屏幕尺寸进行响应的做法，称之为响应式布局，又称作自适应网页设计，或者弹性设计。
这种主要依靠CSS的方案有很多优点，比如：

  • 设计元素很容易被复用，设计成本低
  • 前端只需要维护一套CSS代码，维护成本低
  • 桌面端与移动端的设计十分接近，令用户感到“熟悉”
  • 不需要任何服务器端的支持
  • 与业务耦合程度低，复用程度高（ 以至于 Bootstrap、Foundation 等一干框架都跟进了这个解决方案 ）

但问题也很明显，比如：

  • 设计需求复杂时，前端的开发成本没有任何减轻
  • 无论是针对桌面还是移动的CSS代码（甚至图片资源文件）都会被同等的下载到客户端（没有考虑移动端的网络优化）
  • 如果JS不写两套，桌面端的交互和移动端的交互很难针对平台作出差异

如果你的移动用户对网站所有的功能和内容有着与桌面用户同等的需求，比如 新闻、报纸（媒体类）网站，或者活动、专题页等 偏重信息传达而轻交互 的网站，那么这个解决方案其实恰到好处：
触摸屏优化（胖手指）、减少次要信息…… 这些通过 CSS 解决就够了。

但是，如果我想要做更多的 「移动化设计」，比如 减少信息层级、增强手势操作、让网页更接近一个Native App ，就不那么合适了。

于是又出现RESS （Responsive Web Design with Server Side Components）通过服务器端组件的响应式网页设计。
不过如此的话，不管从开发资源上还是产品、设计资源上都等价于独立的移动版网站开发了。

最后说一句：很多同类技术之间，不是一个二选一的问题，而是选择一个合适的度。