H5定制开发的细节注意事项
当我们选择要做H5开发时,必须要先了解它的开发流程及细节问题,如果你无法掌握细节设计,那你的H5页面可能无法达到预期的效果,所以我们在做H5定制开发时有哪些细节事项需要注意呢?下面小编就来带大家了解一下吧。
1、特殊机型的适配
H5在不同的机型适配,虽然每个开发者都有一套自己的完整方案,但一定要注意小屏机(虽说现在大屏机已是主流,尤其是iPhone4s)和带有虚拟按键的机型适配(如魅蓝note)。
2、图片请压缩
图片是网页的重要资源,除了常见的PS来压缩图片外,推荐大家去 Tinypng,在这里可以压缩网页中常见图片,如 .png 和 .jpg ,而且可以拖拽一组图,压缩完后还可以一键下载,效果也是杠杠滴~(之前在实用网站中也有提到过)。
3、背景音乐请压缩
背景音乐当然是越清晰越好,为了让 H5 本身更流畅,通常我们会对背景音乐做压缩,一般情况下我们会降低音频的比特率(控制在32kbps,这个在格式工厂中属于低质量音频),时间尽量控制在1min之内,保持最终的文件大小在600kb以内。
4、CSS Sprites 图像拼合
浏览网页的时候,细心的童鞋可能会发现,有些网页中多张图片素材按照一定的规则合成在一张大图中。为什么这样处理呢?因为把多张图片放在一张大图可以大大减少资源对服务器的请求次数,另外合成后的图片文件大小比多个单张图片要小的多。(技术实现原理实际上是用 background-position 来实现对应图片的定位)
5、Animate(动画)
各种炫酷的H5动画其实大部分都可以用 CSS 动画来实现。动画的原理无非是对象的位置、大小、旋转、透明度在单位时间的变化形成一系列的动画。而这些对象属性在H5中都有对应的属性来控制。通过代码来实现的,所以相比较序列图形式,性能更优、访问速度更快。
6、使用 SVG 格式图片
就像矢量图形一样,SVG 也是一种图片类型,不过它是基于 一系列有序地代码构成的,所以以 SVG 格式存储的图片资源文件比较小,相比较 JPG 而言,几乎是近百倍的差距。所以用 AI 等矢量工具制作的页面,优先考虑将图片存储为 SVG 格式。
总体来说,H5定制开发需要注意的事项主要是元素细节与不同机型适配问题,大家可以参考借鉴一下。如果你想直接做H5页面定制开发,那就直接咨询我们蓝橙互动网站客服吧,了解一下最新的H5开发信息。
更多服务:H5案例|H5开发|H5定制|小程序定制|网站商城定制|小程序开发|微信设计|H5制作公司|微信小程序定制