关于像素？

我们说的分辨率&＃xff0c;

比如

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

NO&＃xff0c; 分辨率高未必清晰&＃xff0c;我都见过那种很大led广告屏&＃xff0c;分辨率高啊&＃xff0c;几千几万&＃xff0c;但是仍然能看到明显的颗粒度。

在仔细一想&＃xff0c;其实清晰不清晰&＃xff0c;主要看的是单位密度(ppi)而不是设备总像素的多少。是不是单位密度越高&＃xff0c;显示的细节越清晰啊。

1. 有没有发现&＃xff0c;所有的这些都是和具体的设备挂钩的。谈像素谈尺寸&＃xff0c;都是离不开具体的设备。

但是有个问题&＃xff0c;为啥又引入dp的概念&＃xff0c;独立设备像素呢。

物理像素对应设备像素不是挺好&＃xff1f;

好吗&＃xff1f;

对于开发人员来说&＃xff0c;设备千千万。分辨率千差万别。

你想一下&＃xff0c;如果同样3.5寸的屏幕上&＃xff0c;我有个列表

宽度都是100%&＃xff0c;高度我设置 20

你会发现&＃xff0c;分辨率高的屏幕上&＃xff0c;高度特别小&＃xff0c;宽度特别长。反倒是
分辨率高的显示的不清晰(跟蚂蚁一样&＃xff0c;密度太高&＃xff0c;物理上看起来就小的很)

这可咋整啊。

设备厂商也郁闷了&＃xff0c;草尼玛&＃xff0c;老子辛辛苦苦提高分辨率&＃xff0c;出力不讨好啊。

有啥办法&＃xff0c;看起来物理上的高度和宽度都一致&＃xff0c;但是更清晰的。

有没有什么办法解决啊&＃xff01;

于是大家一合计&＃xff0c;你是ppi高吗&＃xff1f;那我定义一个单位&＃xff0c;

这就引出的独立设备像素&＃xff0c;顾名思义&＃xff0c;就是独立于设备的像素。

我就定义一个逻辑单位&＃xff0c;dp

dp有多大呢&＃xff0c;dp就有小指头的上方的一小块这么大&＃xff08;笑笑&＃xff09;。

你们呢都&＃xff0c;尽量往上靠&＃xff0c;高的你就在设备层面转化物理像素的时候&＃xff0c;放大一下。
低的呢&＃xff0c;你就缩小一点。

这样看起来&＃xff0c;大家是不是差不多大了。

对于开发人员来说&＃xff0c;只要设置的两个屏幕逻辑像素相同&＃xff0c;它们的显示效果就是相同的。
是不是很爽。

大家一总结&＃xff0c;发现把设备按照ppi分一下&＃xff0c;大概是这么个比例&＃xff1a;

ldpi [0.75倍]

mdpi [1倍]

hdpi [1.5倍]

xhdpi [2倍]

xxhdpi [3倍]

xxxhdpi [4倍]

不难发现&＃xff0c;真正决定显示效果的&＃xff0c;是逻辑像素尺寸(独立设备像素)。

有人问了&＃xff0c;我一个前端懂这些有卵子用。

移动端页面的绝对单位就是px啊&＃xff0c;我设置dp也不支持啊(草&＃xff01;&＃xff01;!为啥不支持dp?)

px和dp有啥关系&＃xff1f;你想啊&＃xff0c;浏览器也是设备上的应用&＃xff0c;也是按照设备的缩放比缩放的。
具体可以对照一下, 缩放比&＃xff1a;

1dp&＃61;1px&＃xff08;mdpi、iPhone 3gs&＃xff09;

1dp&＃61;1.5px&＃xff08;hdpi&＃xff09;

1dp&＃61;2px&＃xff08;xhdpi、iPhone 4s/5/6&＃xff09;

1dp&＃61;3px&＃xff08;xxhdpi、iPhone 6&＃xff09;

1dp&＃61;4px&＃xff08;xxxhdpi&＃xff09;

你再想想&＃xff0c;不支持dp也行啊&＃xff0c;你不是不支持吗&＃xff1f;

老子自己造&＃xff0c;自己的轮船自己造&＃xff08;哈哈&＃xff01;笑&＃xff09;

既然我都知道缩放比了&＃xff0c;老子自己换算一下不就ok了。

嗯&＃xff0c;对了&＃xff0c;就你最聪明&＃xff01;&＃xff01;

哈哈&＃xff0c;所以就有了rem的解决方案。

ps: 如何和设计沟通?

单位决定了我们的思考方式。

在设计和开发过程中&＃xff0c;应该尽量使用逻辑像素尺寸来思考界面。

设计Android应用时&＃xff0c;有的设计师喜欢把画布设为1080×1920&＃xff0c;有的喜欢设成720×1280。

给出的界面元素尺寸就不统一了。

Android的最小点击区域尺寸是48x48dp&＃xff0c;这就意味着在xhdpi的设备上&＃xff0c;按钮尺寸至少是96x96px。

而在xxhdpi设备上&＃xff0c;则是144x144px。

无论画布设成多大&＃xff0c;我们设计的是基准倍率的界面样式&＃xff0c;而且开发人员需要的单位都是逻辑像素
。

所以为了保证准确高效的沟通&＃xff0c;双方要以逻辑像素尺寸来描述和理解界面。