(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)
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答