(1) 動畫雪碧圖

　　涉及的動畫十分多，用的元素也十分多，請務必使用雪碧圖(Sprite)!

　　網上的工具有一些可以幫助你生成雪碧圖的工具，例如CssGaga，GoPng等等，自動化構建工具Grunt和Gulp也提供了相應插件。

　　特別地，如果單張雪碧圖面積實在太大，可以拆分雪碧圖，例如拆分成2-4張，因為現代瀏覽器都支持4-6個同源請求下載，若資源實在太多，也可以考慮把靜態資源放在不同源域名下去請求，這里犧牲多幾個請求換來圖片同時加載比一張圖片慢慢加載要好，當然，這需要具體情況去衡量。

　　順便提一下，我寫動畫的一個小技巧是把每一頁的動畫分在一個import.css里面，然后最后在主樣式中import進去，這樣方便調試動畫，也容易維護，例如：

　　//style.css

　　@import url("reset.import.css");

　　@import url("loading.import.css");

　　@import url("m-animate-1.import.css");

　　@import url("m-animate-2.import.css");

　　@import url("m-animate-3.import.css");

　　當然，import不是原生支持的，這里需要一些流程化工具讓import的頁面在輸出之前經過組裝-壓縮的步驟。

　　(2) 圖片壓縮

　　圖片壓縮是老生常談，但是仍然有不少人忘記壓縮，那可是活生生的帶寬和流量的浪費啊…

　　html' target='_blank'>壓縮圖片需要有好工具，有智圖，TinyPNG，JPEGmini等等。

　　依靠工具外，還有以下方式可以優化圖片：

　　1.盡量避免用PNG24。如果圖片色彩要求不高，請使用PNG8;

　　2.使用新格式，WEBP和BPG等新格式的到來，在不用考慮兼容的情況下請大膽嘗試;

　　3.用SVG和ICONFONT代替簡單的圖標;

　　4.用FUFU的字蛛來代替藝術字體切圖。

　　(3)多終端兼容

　　多終端兼容是一切的根基，要知道有人拿著腎6+，有人拿著腎4，大則414×736，小則320×416(IPHONE4在SAFARI保留上下端導航)，因此多終端兼容是十分必要的。

　　曾經有一種派系為320派系，就是大部分頁面都是320寬度，因此干脆直接用320的容器來包一切頁面，那樣也簡單，然而IPHOEN6和IPHONE6+的出現簡直是滅了這個派系。

　　那么到底要如何兼容呢？

　　這里我分了三個時期來說說：

　　A.設計初期。 先審視設計稿，因為320派系的原因，大部分設計稿只考慮到IPHONE5來設計，因此很多背景元素是只有320px寬度(頁面實際渲染寬度)，例如下圖。

　　那么，這時候就需要設計提供一個較長的延伸背景了，最好是可以重復的，用background-repeat可以減少圖片大小。

　　B.設計中期。 也就是具體的兼容方法，可以使用CSS3 Media Query和類覆蓋。

　　1.CSS3 Media Query，按范圍兼容機型。

　　/*iphone6*/

　　@media only screen

　　and (min-device-width : 375px)

　　and (max-device-width : 667px)

　　and (orientation : portrait)

　　and (-webkit-min-device-pixel-ratio : 2)

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。