码迷,mamicode.com
首页 > 移动开发 > 详细

【移动端debug-5】可恶的1px万能实现方案

时间:2016-06-11 22:53:43      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

最近和设计同学调ui,遇到的是一位对1px有极致追求的同学,像素眼一眼看出我写的是不是1px,所以让我好好地研究了一番1px到底怎么写最方便。

一、为什么出不来1px?

简而言之:css的1px只是一个抽象的单位,并非实际设备中的1px。

关于retina屏:

我们知道现在iphone大多数型号都用上了retina屏,而retina屏的分辨率相较于普通屏幕增加了一倍,也就是说原来1个像素宽度的区域可以塞进2个像素。我们css写的1px是一个概念像素,在retina屏的实际设备上占了2px的位置。

而对于手机屏幕整体来说,一个标注了750宽的手机(iPhone6)在css中只需要375px就能表示。

 

二、如何在手机上写出1px?

网上其实有人列了非常多的方案,有用transform的、有用图片的、有用canvas的、还有用0.5px的……从操作简易性来看,用transform的方案是比较简单的,而且适配也比较容易(0.5px的方案安卓不支持)。

原理:写一条1px的线,然后transform:scaleY(0.5)或scaleX(0.5),就能够将retina上显示的2px缩小为实际屏幕中的1px。

 

三、几种1px的样式实践方案

1、单线

2、四边形

3、圆角四边形

【移动端debug-5】可恶的1px万能实现方案

标签:

原文地址:http://www.cnblogs.com/shuiyi/p/5568348.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!