共计 1455 个字符，预计需要花费 4 分钟才能阅读完成。
我们说的分辨率，
比如
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。
无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。
所以为了保证准确高效的沟通，双方要以逻辑像素尺寸来描述和理解界面。
