查了一上午资料,经历无数虚假文章洗礼后我,我!..终于弄懂了…这个问题原来是个UI设计师和前端开发的撕逼问题…
事情还要从那张’750px’设计稿说起…
一般UI交付一张750px的设计稿给前端,由我们将其还原为移动端,一般是还原适配ipone678
好,我们拿到设计稿.摩拳擦掌,兴致冲冲的跑去代码
嗯…border:1px solid #333; 好的 !一个边框属性就这么被愉快的写了进去.
经过我们的努力奋斗,网页效果终于被完全还原了出来,
于是交付给UI设计师审查过目,看看还原的效果合不合格…
UI设计师:“卧槽,你这边框这么粗?,比TM大象腿都粗!!”
我:"???" “不是你要的1px边框吗??啊??”
UI设计师:“什么1px不1px,那不存在!我就是要那个效果,你这个明显粗,怎么实现是你们前端的事!!”
我:“我…CNMD…”
分界线"============================================================"
问题就是这样 ,我们按照UI的要求写了1px的边框,他们苛求,说我们粗,虽然我们确实粗…但是…但是…
据我查阅网络资料了解到,这就是前端和UI工作的差异导致的问题:前端定设计稿,按照的是物理像素写的,比如Iphone6,物理像素
750,他就按照750去定稿 , 他看见边框为1物理像素,就在注解上写下了1px,
但但但…这个1px是物理像素!
要怪就怪逻辑像素和物理像素都用px(pixel)表示,UI写的1px,是物理像素,但ipone6的像素比为2,所里逻辑像素
应该为0.5,但我们看了注解:“border:1px”,误以为他写的是1逻辑像素,也跟着写1pxcss,所以…我们就粗了…
那写0.5px就没事了吧,0.5px就表示1物理像素…
可怕的是事情还没完…
苹果机IOS9系统以上是支持小数点的逻辑像素表示方式,但在安卓机上,绝大多数不支持小数点表示方式.
明白了吗,TMD安卓不能写0.5px! 安卓机多少用户不用多说了把! 兼容!!一定要兼容!!!
所以自然的引出了新的问题:"如何在安卓机上,实现设计师口中1像素边框,也就是不能用0.5px(像素比为2),或者0.3333px(像素比为3)的表示方式,但又表示出1
物理像素的效果.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
