拿到設計稿一開始就先看看這個設計稿的佈局，有一些是從頁面頂部到底部都有效果的，這個時候就要考慮在 iPhone4 這樣屏幕不夠高的設備上如何保證頁面完整呈現；或者在不影響交互的狀況下，隱藏哪些元素。有的時候頁面上元素比較集中，這個時候就要考慮在 iPhone6+ 這樣的大屏幕設備上，要不要調整間距使得頁面不會太空曠
zoom和transform:scale：
zoom 縮放的是被 zoom 的容器的視口，能夠把它想象成放大鏡的效果，這個屬性是可被繼承的，因此咱們作設備屏幕兼容的時候，能夠在 body 標籤下加一個 div 包裹住頁面上的其餘元素，而後在這個 div 上加 zoom，達到的視覺效果就是頁面上其餘元素也被縮放了。可是有些元素並不支持 zoom。
transform 屬性應用到元素的過程實際上是矩陣變換的過程，在渲染的時候，元素的座標就會被肯定下來，而後和 transform 的屬性值進行矩陣運算獲得最終的座標，不過你會發現，一個絕對定位的元素經過 transform 改變顯示位置後，這個元素的 tbrl 值並不會被更新，且 transform 屬性不可繼承的。
要想 transfrom: scale(x) 達到和 zoom 類似的效果，要記得把 transfrom-origin 設置成 0 0。這麼設置的緣由是，在文檔流中的元素，是以它的左上角爲中心進行 zoom 的，而當元素脫離文檔流時，要使 transform: scale(x) 和 zoom 達到相同的效果，還要具體分析 transform-origin 要如何設置。
爲何 scale 會留下右部和底部的迷の白色呢？回到 transform 的定義中，「applied to the coordinate system an element renders in through the ‘transform’ property」。當元素都進行渲染了，座標已經肯定了，再進行縮放，也就是在原來元素基礎上改變大小。因此 .sf-index 雖然在渲染時四個角的位置分別是(0,0)、(100%,0)、(0,100%)、(100%, 100%)，通過以 (0,0) 爲變換中心的 scale，就變成了(0,0)、(85%,0)、(0,85%)、(85%,85%)。咱們就會看到頁面右邊出現寬度爲15%的一條白邊，以及頁面下方高度爲15%的白邊。
尋找動畫靈感：
其餘兼容方法：
像須要大量圖片的頁面，作兼容的時候咱們經常擔憂的是什麼？固然是圖片比例出問題咯，因此也會使用經過僞元素設置 padding-top 的方法，保證圖片比例正常地顯示出來。只是這樣的寫法一般要結合 background-size:cover; 而咱們經常使用的工具 CssGaga 在生成雪碧圖了以後會覆蓋 background-size。目前的這個方案的話……就不合成雪碧圖了。
還有一個方案是使用 media query 結合 rem （或百分比）完成這樣的佈局，不過目前 gaga 不支持 background-size 的 rem，因此要採用什麼方式合成雪碧圖以及如何生成新的樣式，還須要尋找新的方向。在不須要合成雪碧圖的時候，能夠用這兩種方法。
僞元素真的是神同樣的存在，一個標籤自帶兩個兒子，不知道爲何就有種金閃閃的感受。可是僞元素上的動畫真的很坑
Android 上坑多，不要一次應用太多新技術。好比在魅族上用 flexbox 佈局，就要加上 display: -webkit-box。還有一個教訓就是，頁面果真應該作一個測試一個
有個細節，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變更畫不能中止在最後一幀。有這樣一個解決方案：css
1.用Modernizr去檢測是否支持這個屬性，加上識別類.no-animation-fill-mode；web
2.根據識別類採起如下措施：
（1）用js模擬一樣效果；
（2）用css屏蔽掉動畫；
（3）或者直接所有都用transition來作（不要keyframes）。app
Android手機的屏幕碎片化很是嚴重，各類各樣的分辨率很是之多，那麼如何讓遊戲能夠適配這些機型就顯得尤其重要。這裏也是前先後實驗了多種方案。先想到用JS來動態的根據分辨率來設置相關元素的大小，但要麼在某些機型中獲取失敗，要麼用賦值縮放相關元素時形成遊戲崩潰……用 absolute 來解決：函數
關鍵代碼：工具
1
2
3
4
5
6
7
8
|
.game {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
} |
以上代碼使遊戲容器絕對定位以後，上下左右四邊都與手機屏幕貼緊，從而作到了適配各類屏幕。
而後使用 background-size:cover; 讓背景覆蓋全屏，此代碼可使背景 自動縮放 至 覆蓋 容器大小。佈局
爲了適應各類屏幕，應該使用動態居中的佈局，而不是傳統頁面的左上角爲基準：測試
.welcome { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -111px; background-image: url("img/wel.png"); width: 222px; height: 200px; }flex
但願每次瀏覽這一屏內容的時候，動畫都走一遍，可使用reflow從新觸發一下animation:動畫
container.classList.remove("active"); container.offsetWidth = container.offsetWidth; container.classList.add("active");flexbox
animation-timing-function:steps(4, start);
第一個參數必須爲正整數，指定函數的步數。第二個參數取值能夠是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認值爲end。
每一幀變化會自動計算取平均值。
原理仍是在不斷的移動背景圖片，但每種背景會保留一段時間，經過他咱們能夠方便的製做幀動畫