skyADMIN

移动端WEB开发笔记

入厂一来的任务都是移动端的,和PC端确实蛮不同的,做点记录。

首先,移动端的web开发和PC端相比最大的不同就是不用考虑兼容问题(其实我本来也不会处理兼容问题……),各种新特性基本随便用。

而移动端最大的问题在于,各种各样的设备有各种各样的尺寸,样式会出问题,除非全算百分比。

先吐槽一下zepto,说好了和jquery一模一样只是没考虑兼容性呢?$.ajax的配置字段不一样啊我去,jquery用method: ‘POST’,zepto用type: ‘POST’。据说现在网速和性能上来后已经不在乎jquery和zepto那点小小的大小差别了……

然后就是适配问题了,阿里出的技术方案,REM布局,flexible.js可以搜一下,github上已经开源了。我用的是团队内部自己实现的一个,功能都一样,就是思想挺有意思。获取设备的宽度,然后划分成10rem,就可以得到1rem是多少,然后把这个值设定到html标签上的font-size。之后的宽高都用rem来计算。

举个例子就是,设计稿是320px宽度的,有一个64px的元素,设定其宽度时写width: 2rem。如果当手机变成了414px的iPhone6s Plus,flexible.js会自动计算1rem = 41.4px,然后设在html标签上,这时候刚刚那个64px的元素的宽就变成的82.8px,比例一样,样式不变形。关键就是用js去计算结合了css的计算(1rem = 根节点的字体大小)。

额。没人觉得iPhone6s plus的分辨率才414px不对么?说好的1080px呢?

然后才明白我写了多年的一个meta到底是啥意思,嗯,说的就是viewport,写bootstrap的同学应该都知道。手机设备的物理分辨率太高了,5寸屏都是1920*1080的,如果不做点相应的处理,那就大家一起练眼神了。然后好像说是苹果吧,弄出了这个viewport,拿多个像素点表示一个像素点。物理像素和CSS像素就有了区别。

呵呵,用过bootstrap的人应该不少,大部分估计都觉得,有个viewport挺好啊,就可以愉快地开发移动端的web前端了啊。

嗯,然后我导师让我把边框改成0.5像素的……Orz……把像素掰成两瓣么……到底啥意思啊。还好本宝宝是一个乐于阅读文档和源码的boy。前辈的代码里看到过一个注释叫半像素解决方案。

然后去搜了下,在viewport下,你写的边框1px,但是实际上手机屏幕可能会用两个像素去渲染这根线,就变粗了。我神经大条无感啊,但是设计师可是拥有着像素眼的神级存在(设计师:2px的线,不性感!)。OK,解决方案两种,一种缩放,一种伪类,详细不说。因为我不懂……

码字很辛苦,转载请注明来自环宇博客《移动端WEB开发笔记》

评论