感激贷岩的约请，我在本期奶茶会上做了“呼应式设计实践”的分享，是接着上一次的话题进一步讨论“如何实现”。呼应式Web设计(Responsive Web design)是当下比较流行的话题，什么是呼应式设计？简单讲，页面的设计与开发该当依据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的呼应和调整。具体的实践方式由多方面组成，包括弹性网格和规划、图片、CSS media query的使用等。

呼应式设计听起来非常理想，但其技术实现则困难重重，由于呼应式设计并不只仅包含设计本身，还包含实现，更进一步讲，实现原理固然简单，但要考虑到开发成本、功用、可维护性方面则又是充满了挑战。比如说，我们都知道使用MediaQuery来实现CSS去适配各式终端，但MediaQuery该当从高分辨率还是往低适配还是从低分辨率往高适配？容器款式使用MediaQuery来作适配，那么规划是不是也适合用MediaQuery作适配？加入MediaQuery适配后的页面体积添加了，如何在小屏幕终端里降低页面体积？带有复杂交互的组件如何作适配？MediaQuery添加了代码复杂度降低了可维护性，如何让MediaQuery来顺应变化频繁的被运营的Web页面？这些问题不是一两篇文章能说明白的。我们需求提炼出一套实现呼应式设计的最佳实践。为此我们成立了“变色龙”小组（呼应式设计小组），来持续对当前方案进行改进，成立几个月时间以来，淘宝新业务曾经有不少页面开始尝试呼应式设计，我们将文档中部分内容提炼出来，分享给大家，希望对各位刚刚学习呼应式设计的同学有所协助。

对于刚才提到的这些问题，小组在规划和组件开发上给出了一些思路和粗糙的实现，但对于设计师同学来讲，挑战更甚，由于设计师只要在充分和前端工程师沟通理解的基础上才能设计出完满的呼应式UI，毕竟呼应式UI上的一点小改动，将会带入极大的开发任务量。所以呼应式设计从某种程度上讲是一种团队协作模式，这也给设计师和前端工程师提出了更高的要求。

PPT中提到的规划问题稍微有点复杂，如果考虑到终端兼容，首先该当考虑容器的宽度可变，最典型的容器为图文混排容器。和英文和拉丁语系的UI设计不同，中文网页排版天生不灵活，图文混排太受文案限制，由于在英文排版中，单词个数不构成影响容器规划的关键要素，不同单词的长度不一样，中文网页中汉字个数则很大程度影响UI，由于丁文很容易撑开图文容器，汉字则不行，例如菜单项字数限制，列表项不能折行，规划上就缺少流体+灵活的美感。对于视觉设计来说，这是最大的挑战。

在定宽网页设计中流行的栅格，并不适用于多终端兼容的情况。因此在固定宽度的规划下，CSS网格规划表现出色，在处理浮动元素的百分比时比较麻烦。然而，大多数的网格系统都提供浮动属性选项，这非常蹩脚，当我们在网格中插入列时，网格款式常常因此而扭曲变形。另外，固定宽度栅格对“呼应”的支持非常蹩脚，形成这些问题的“首恶”就是我们现有工具的局限性。导致CSS编码缺少灵动，一套CSS对应一种适配。而Less则是处理CSS语法缺少灵活性的一种尝试处理方案。Less让CSS变得“可编程”，具有更灵活的顺应能力，基于此我们展开对呼应式规划的进一步探讨。

在使用less实现规划时遇到了一个小问题，由于Firefox中width等属性最高只要3个小数点的精度，所以某些极端情况下某一行上Less计算出来元素宽度总和可能会比总宽度超出0.000x个px，从而导致错位，目前采用hack的方式对每个元素的计算后的width都减去0.01px暂时规避处理，可能还会有一些可知不可知的问题存在，需求我们不断地去完善。而且Less.js在客户端对CSS进行编译使用可能会对功用形成略微的影响。

还有一个最容易被忽略的问题，就是智能机中的动画功用，在普通的PC平台里，动画的实现大都是通过setInterval函数来完成，jQuery和YUI以及Kissy中亦是如此，只不过帧频有所差异。后来都各自添加了对内置css3 transition的检测，优先使用css3 transition，动画在现代浏览器中的功用又上升了一个台阶。但在iphone/ipad/android中仍然不流畅，更流畅的动画则需求开启webkit的硬件加速。可以参照之前的一个ppt来了解js动画编程的一些背景知识。

css3动画分为两种，transitions和transform，css3 transform本质上是将元素的内容作平移，而非直接对元素作属性渐变，因此功用更好，通过Demo可以看出，挪动端的Dom操作功用要比css3 animation慢几个数量级。因此要在动画中尽量减少Dom操作，而只对动画的内容绝对位置作平移。另外还有一个css3动画相关属性就是keyframe，这个是用来辅助作复杂动画时用的，通过设定关键帧来作动画，在Slide控件中的简单动画暂时用不到。因此css3动画的几个属性小结如下：

• css3 transition：平滑的改变CSS属性值，和setInterval原理类似，但速度更快
• css3 2d transform：二维变换，CSS属性值未渐变，未用到webGL加速，速度有提升，但提升程度无限
• css3 3d transform：三维变换，CSS属性值未渐变，开启WebGL加速，速度明显提升
• css3 animation：即便用keyframe来模仿动画，用来实现复杂动画，和功用无关

所以我们推荐使用在支持transition的平台中使用translate3d来启用硬件加速，留意要使用transform代替transition。

当前我们某种程度上实现了呼应式设计，但后续还有很多优化的任务，特别是页面体积的优化，是需求接下来着重要思考的。

附：PPT地址