我们知道pc设备和移动设备是有很大差别的，首先是屏幕大小是有很大区别的，首先是笔记本或者台式机他们的屏幕呢都由13寸，14寸甚至20寸大小，而手机的屏幕通常5到6寸，平板最大能到10寸，然后就是手机的处理速度 ，手机平板他们的cpu数量声称核心数量有很多，但实际上和pc的处理器相同，计算能力差距还是很大的，最后呢是在操作上，手机大多采用了触摸屏，输入呢都能使用软键盘，而pc设备呢，通常使用鼠标和物理键盘，那么二者存在如此大的差异，作为和用户交互的界面和操作，他们的差别也非常大，用html5技术开发的手机应用使用的技术和原则和桌面端也有很大的不同。
我们从cordova开发角度来看，第一个准则呢：
尽量使用单页面开发（SPA）
所谓spa呢，就是只请求一次页面，用户在请求这次页面中，加载一系列的JavaScript，css,在后续发生更新的时候，都通过ajax技术来实现，一般越复杂的运用应该使用spa越合适，spa可以让你更高效的组织功能，列如在cordova中，必须要在项目完成，命令行输入，哪些插件才可以使用，那么当我们进行页面切换时，整个页面的加载流程会重新执行一次，这样也会带来一系列的性能负担，在其他容器或者纯html运用中，这些问题也存在，同时呢，页面切换也产生一些网络加载的情况，会造成用户体验急剧降低，页面切换效果呢也无从实现，
移动h5慎重选择ui前端框架
越是一个复杂的运用选择一个前端框架产生的风险就越高，因为你有许多功能可能无法实现，或者实现方式非常别扭，其根本原因在于前端页面在交互的碎片性复杂性，很多时候一个特定的交互功能很可能是你app的亮点和核心竞争力，在通用的ui框架上很难胜任，特别是有些通用框架在产生出来应用有一种千篇一律的感觉，这些更是扼杀了创新型。
动画，特效使用准则（60fps）
有些时候在pc上一些很炫的应用到移动端就又卡又慢，我们平时采用的动画一定要达到60fps的标准。
在浏览器上消耗最小的css属性
位置：transform:translate(x,y,z)
大小：transform:scale(n)
旋转：transfrom：rotate（deg）
透明度： opacty(0-1)
推荐网址：http://csstriggers.com/(详细介绍了css样式使用操作时浏览器或者硬件所需要进行的操作）
长度单位使用rem
rem即相对文档根元素比例
在pc端用的px和em用的比较多，px指的是像素，比如12个px指的是屏幕12个像素大小，em表示的是倍数，即1.2em 指的是字体大小为父容器字体大小的1.2倍
网友评论