感謝貸巖的邀請，我在本期奶茶會上做了“響應式設計實踐”的分享，是接著上一次的話題進一步討論“如何實現”。響應式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動畫的幾個屬性小結如下：
所以我們推薦使用在支持transition的平台中使用translate3d來啟用硬件加速，注意要使用transform代替transition。
當前我們某種程度上實現了響應式設計，但後續還有很多優化的工作，特別是頁面體積的優化，是需要接下來著重要思考的。
附：PPT地址