玩转,HTML5移动页面（优化篇）

　　(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)

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。