乐趣区

前戏,啥是像素?

我们说的分辨率,
比如

iphone4 的分辨率是 960 * 640 —这个是单位是点,标识设备屏幕上有多少显示单元,每个显示单元,可以理解一个个物理的发光二极管
iphone4 的尺寸是 3.5in,说的是物理的尺寸,对角线的长度,对应我们常说的物理单位,cm,m 这种。
思考一下,是不是我的分辨率越高,就显示的越清晰?

NO,分辨率高未必清晰,我都见过那种很大 led 广告屏,分辨率高啊,几千几万,但是仍然能看到明显的颗粒度。
在仔细一想,其实清晰不清晰,主要看的是单位密度 (ppi) 而不是设备总像素的多少。是不是单位密度越高,显示的细节越清晰啊。
有没有发现,所有的这些都是和具体的设备挂钩的。谈像素谈尺寸,都是离不开具体的设备。

但是有个问题,为啥又引入 dp 的概念,独立设备像素呢。
物理像素对应设备像素不是挺好?
好吗?
对于开发人员来说,设备千千万。分辨率千差万别。
你想一下,如果同样 3.5 寸的屏幕上,我有个列表
宽度都是 100%,高度我设置 20
你会发现,分辨率高的屏幕上,高度特别小,宽度特别长。反倒是分辨率高的显示的不清晰(跟蚂蚁一样,密度太高,物理上看起来就小的很)
这可咋整啊。
设备厂商也郁闷了,草尼玛,老子辛辛苦苦提高分辨率,出力不讨好啊。
有啥办法,看起来物理上的高度和宽度都一致,但是更清晰的。
有没有什么办法解决啊!
于是大家一合计,你是 ppi 高吗?那我定义一个单位,
这就引出的独立设备像素,顾名思义,就是独立于设备的像素。
我就定义一个逻辑单位,dp
dp 有多大呢,dp 就有小指头的上方的一小块这么大(笑笑)。
你们呢都,尽量往上靠,高的你就在设备层面转化物理像素的时候,放大一下。低的呢,你就缩小一点。
这样看起来,大家是不是差不多大了。
对于开发人员来说,只要设置的两个屏幕逻辑像素相同,它们的显示效果就是相同的。是不是很爽。
大家一总结,发现把设备按照 ppi 分一下,大概是这么个比例:
ldpi [0.75 倍]
mdpi [1 倍]
hdpi [1.5 倍]
xhdpi [2 倍]
xxhdpi [3 倍]
xxxhdpi [4 倍]
不难发现,真正决定显示效果的,是逻辑像素尺寸(独立设备像素)。
有人问了,我一个前端懂这些有卵子用。
移动端页面的绝对单位就是 px 啊,我设置 dp 也不支持啊(草!!! 为啥不支持 dp?)
px 和 dp 有啥关系?你想啊,浏览器也是设备上的应用,也是按照设备的缩放比缩放的。具体可以对照一下, 缩放比:
1dp=1px(mdpi、iPhone 3gs)
1dp=1.5px(hdpi)
1dp=2px(xhdpi、iPhone 4s/5/6)
1dp=3px(xxhdpi、iPhone 6)
1dp=4px(xxxhdpi)
你再想想,不支持 dp 也行啊,你不是不支持吗?
老子自己造,自己的轮船自己造(哈哈!笑)
既然我都知道缩放比了,老子自己换算一下不就 ok 了。
嗯,对了,就你最聪明!!
哈哈,所以就有了 rem 的解决方案。

ps: 如何和设计沟通?
单位决定了我们的思考方式。
在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。
设计 Android 应用时,有的设计师喜欢把画布设为 1080×1920,有的喜欢设成 720×1280。
给出的界面元素尺寸就不统一了。
Android 的最小点击区域尺寸是 48x48dp,这就意味着在 xhdpi 的设备上,按钮尺寸至少是 96x96px。
而在 xxhdpi 设备上,则是 144x144px。
无论画布设成多大,我们设计的是基准倍率的界面样式,而且开发人员需要的单位都是逻辑像素。
所以为了保证准确高效的沟通,双方要以逻辑像素尺寸来描述和理解界面。

退出移动版