今年折腾手机里的页面折腾的不少,一开始要求是用响应式,结果发现做点不变更需求的不要求快速上线的需求还好,可这TMD世界上有不变更的不快速上线的需求吗?
答案是木有啊!!!

先说说响应式页面
一套页面就要适应所有终端有木有,这是一个无底洞啊同志们!!!你要测多少设备,切多少适应式图片,写多少兼容性代码,特别是设计师同志设计出来的没有mobile first,这一开始就注定了后面源源不断的微调啊!!!
当然,今年主要都是跟活动类的需求,比起平台类的来说,时间要求高,过了这个点这活动上线就没什么意义了。所以在我分析了不少响应式页面后……
终于发现,原来做成PC和手机两套页面就可以了。为什么呢?

  • 第一,从数据上来说,现在手机和PC是最大头的访问来源,别的设备,只要显示PC或手机中的页面就OK。
  • 第二,从开发效率上来说,只做手机和PC很有针对性,不像响应式什么都是目标,那什么可能都捞不着。
  • 第三,从性能上来说,因为有第二条有针对性,那么我们也可以针对两种设备做优化,响应式怎么个优化?

接下来就是手机中的页面要怎么弄

在分析了不少手机中的页面发现,基本上都按是320px宽来做,或做成宽自适应,或不做成。
做成宽自适应的当然最好,不过活动类的则可能只做到背景自适应,因为很多时给的设计稿就没考虑过自适应的问题。
当然这里也不怪设计师同志们,因为

  • 首先,数据上来说320已经满足大多数手机中的要求了。
  • 第二,自适应也会影响设计创意的发挥。
  • 第三,定宽页面比自适应的要好实现多了,哈哈。

当然设计稿是不可能按320px宽来设计的,因为还有Retina,所以都是按640px宽来设计。我们有GAGA这样的神器,2x变1x,适应Retina代码自动生成。

然后写代码注意的
首先要用viewport把页面拉到屏幕宽,这代码网上一搜索一大堆。
然后可以用很多css3的高级东东,有这么多的高级属性可以用,你会发现写手机页面比写PC页面是多么爽的一件事
然后针对WEBAPP的JS你会发现,PC上很多作法在这里是件很耗电的事,甚至让人家手机死机……这里初步研究主要是动画特效部分就放手都用CSS来做吧,JS来做特效那是PC时代的事了。

然后就是调试测试了

  • 首先,外网服务器是必须的,因为手机要访问着看呢。
  • 然后,什么weinre的可以用,不过用的不多,主要还是用CHROME开发工具模拟手机设备来调试
  • 最后,就是发布了,手机上的CACHE不太好清,手机设备也是为了省电才这么设定的吧,什么时间错之类都还很好用的。

当然你想要兼容的越多那肯定要调试测试的就越多,主要还是看数据吧,根据数据来制定兼容到那些设备。

最后还要说一说性能问题
在新时代我们不只是要发挥CPU的性能,还要发挥GPU的
这里CSS已经走在了前面,在 High Performance Animations 一文中已经为我们指出 transform opacity 我们要大用特用,因为可以直接使用GPU加速。而 top left background color 等都会使用CPU,影响性能……

本想配图说明的,懒,就这样吧。

打赏