闲聊响应式 Web 设计

responsive-web-design ui Rei Created at about 1 month ago

这篇文章应该是响应式 Web 设计这个名词的开端。

我第一次知道响应式 Web 设计是在 @yuest 拉我去果壳的周末 Party 时，听豆瓣前端 kejun 关于响应式设计的演讲。

演讲上说，响应式设计在国外已经很火热了，但国内的还处于刚刚起步。国内大公司做法还是单独为移动设备做子域名，独立团队维护，而小公司无力做多平台兼容。也不否认对于财大气粗的公司，供养多个团队是最简单有效的。

我最近终于空下来，开始学习一下响应式设计的知识。

响应式设计技术上关键是 CSS3 中的 media queries，用于做设备显示能力的判断（而不是做设备判断）。

例如

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

这段样式只会应用于显示宽度大于 480px 的设备上。桌面浏览器窗口宽度小于 480px 的时候也会激活这一样式。

有了 media queries 之后，前端设计的模块化需求突然变得严峻起来了。以前的 UI 模块化也许只是为了好整理，而要做到响应式设计，不模块化隔离，简直“不可想象”。所以，现在 Sass 和 Less 变得火热是显而易见的。

响应式设计是对前端的一大考验，很有挑战性。所以接下来我也打算继续深入这个领域，做些小东西实践一下。