「史上最全」UI相关尺寸单位详解 | px、pt、dp、sp、rem、vwvh、rpx、ppi、dpi、dppx
转载自其他公众号：基维斯
先给进来看文章的你点个赞
尺寸适配应该由开发同事负责处理，处理不好是他的问题，你有兴趣了解这些让人头疼的事，证明你是共产主义好社畜，还有工作量不饱和， Good for you ~
适配问题是影响设计复现的常见问题，在你 Mac 上秀气的设计图拿去让经验不足的开发写出来，就有可能变得傻大傻大。你没错，开发也很冤，是按着你给的数值做的呀，问题不是数错了，有可能是尺寸单位用错了。
怎么才能做好适配
首先来理解各种尺寸单位
上表囊括所有界面表现常用单位，只差兼容性奇差的「vm」和基本淘汰的「em」
「PX 像素」 设计师最熟悉的尺寸单位，px 是 pixel 的缩写，即像素，是 抽象的尺寸单位 ，表示位图中最小的一个像素信息点，每一个这样的点只会有一个色值。 例如 #FFFFFF 白色 或 rgba(255,255,255,0.5) 半透明白 但是这个信息点到底有多大，则依赖于显示屏的物理性能。 「PT-iOS研发用」 pt 是 point 的缩写，点，印刷行业常用单位，等于 1/72 英寸，是 绝对的固定的尺寸单位 。 软件开发时 iOS 使用 pt 作为尺寸单位，iOS 也是唯一使用绝对尺寸单位的平台，安卓和 H5 都不用 pt。这可能和乔帮主极致用户体验要求有关，各种设备上看到的东西必须是一样大，这样的体验才一致。
「DP-安卓研发用(控件)」 Density-independent Pixel 简称dp，是 安卓开发用长度单位 ，1dp 表示在160ppi 分辨率屏幕上的 1px。不同设备屏幕的 ppi 不同，不同设备上 1dp 代表几个像素也是不一样的。ppi后面会说。 下图是安卓屏幕密度对应表，mdpi、xhdpi 等相当于 iOS 中的@1x、@2x。
160dpi 的设备使用一倍图，320dpi 使用二倍图。这里说一个 750px 设计图一稿适配的小坑 ：750的二倍图上传到蓝湖，iOS端没问题，但安卓方面蓝湖会以 750 作为 xhdpi 的宽，安卓研发按照这个数据做出来的界面会比你的设计图放大4%。在信息密集的产品中界面被放大4%足以引发视觉灾难。 所以安卓需要手动将尺寸设置为 720，蓝湖会按比例等比缩小4%，这样实现出来的效果才是设计图表达的效果，设置方式见下图。
如果你是按安卓标准尺寸出图，即 360 一倍、720 二倍，那么 iOS 看图时同样需要手动调尺寸，但是不建议用 720 出图，因为小程序官方规定基于 750 出图，所以 720 不但不能直接适配 iOS，也不能直接适配小程序。 「SP -安卓研发用(文字)」 Scale-independent Pixel 简称sp，是 安卓开发用字号单位 ，安卓系统有单独调节文字大小的功能，所以字号单独有单位，在默认情况下，1sp = 1dp，文字放大时 1sp > 1dp。
「REM -H5用(字号)」 rem 是相对于某个根元素的 H5开发用字号单位 ，这个根元素是浏览器指定的一个字号值，默认情况下是16px。 例如，设计图中一行文本是24px，使用rem单位代码应写为 font-size: 1.5rem 当浏览器窗口尺寸刚好和设计图相同时，文字显示为24px，当浏览器窗口尺寸缩小50%后，JS脚本会动态更改浏览器默认字号为16px*50%=8px，此时实际展示字号就变成了1.5rem*8px=12px，由24px降到12px，也随之缩小50%。
「VW/VH -H5用(控件)」 有了相对字号单位就需要有 相对长度单位 ，vw、vh 全称是 View Width、View Height，即视图宽度、视图高度。 vw、vh 是相对于屏幕宽高的相对单位，1vw=屏幕宽度的1%。 vw+vh+rem 这个组合可以被用来写响应式页面，不过 vw vh 和 rem 一个是相对于屏幕，一个是相对于根元素，参照物不同，所以这个响应式解决方案大多应用于移动端 H5 开发中，因为移动端浏览器窗口尺寸和屏幕尺寸基本相同且不可变。 「RPX」 rpx 是 微信小程序专用的相对尺寸单位 ，设计师只需要按照750出二倍图即可，研发也只需要使用微信提供的开发者工具按二倍图写代码，其他适配工作由微信开发者工具自动处理。
「PPI-密度单位」 ppi 表示屏幕上每英寸(对角线)有多少个像素点。同一张位图的像素信息是固定的，这张图的真实视觉尺寸与屏幕的“物理尺寸”和“ppi”两者都有关系。 假设2台24寸显示器，一台是老款普通2k显示器 ppi = 94，另一台是 iMac Retina 4k ppi = 219，那么100%显示图片时看到的图像大小会相差一倍多。
现在屏幕 ppi 越来越高，不过不用担心看的图像会越来越小。Win 和 Mac 系统早就有整体 UI 缩放方案，让各种界面保持为用户习惯的视觉大小。 系统界面缩放方案会使用更多的点(Dot)来渲染像素，比如 Retina 屏幕用4个发光点渲染1个像素信息，再配以合适的算法补出图片中未包含的细节，这张图在这个高端显示器上显示的效果就会超级好。 下图是 Apple WWDC 2010 乔布斯介绍 Retina 屏幕，“我们有更多的像素，这很重要”。
点图片看完整视频 时长1'34"
「DPI-密度单位」 dpi 中的 d 为 Dot，上面提到过它是屏幕的最小物理发光点，一个最小发光点和一个像素可能不是一一对应关系，Retina 屏幕就是4个 dot 共同 对应1个 pixel。 请看下面两个列表， 同样是苹果设备，非 Retina 屏和 Retina 屏 dpi 差异巨大。
表格中还有一个叫「dppx 」的单位，也可称为 dpr，通俗解释为「每像素边由多少个 Dot 排列组成」。上表可见分辨率超过1k的 iPhone 基本都是 dppx = 3，即我们熟悉的@3x三倍图。
所有内容已说完！
H5和安卓因为对应的设备繁多，是尺寸适配问题重灾区，尤其H5开发同学通常比较抵触使用除px之外的相对单位，一是哪里要用相对单位，哪里要用px他不清楚，也没有问的动力；二是工作量会有一定增加，相应的bug率也会增加；三是H5相对单位或多或少会有兼容性问题，要hack这些兼容性问题也比较麻烦。 但是通过上面的内容我们已经了解到只用 px 这个单位写前端的话会受到各种影响导致最终呈现效果不理想。设计开发互相理解吧，都不容易，发现问题甩锅没有意义，还是要和开发同学一起把实现质量搞上去。