导航：首页 > 应用 >

APP UI尺寸规范及原理

发表于：2024-04-27 作者：创始人

编辑最后更新 2024年04月27日，关于移动开发中常见的分辨率，dpi、ppi、pt、dp、一倍图、二倍图、三倍图等等概念，有所了解却又不是很清晰，没有系统化地进行梳理，前前后后看过不少相关的文章，有些说的很片面，有些压根就是错误的。今

关于移动开发中常见的分辨率，dpi、ppi、pt、dp、一倍图、二倍图、三倍图等等概念，有所了解却又不是很清晰，没有系统化地进行梳理，前前后后看过不少相关的文章，有些说的很片面，有些压根就是错误的。今天特意查找相关资料，系统地梳理了这些概念以及之间的关系。

DPI与PPI

DPI（Dots Per Inch）是印刷行业用来衡量空间点密度的，指的是打印机每英寸可以打印的点数。后来计算机显示设备借鉴了DPI的概念，创造了PPI（Pixels Per Inch)，用来表示屏幕每英寸的像素点数，因此也叫像素密度。由于DPI的说法已经深入人心，很多时候计算机显示设备也常用DPI来描述，比如安卓设备(mdpi，hdpi...），这种情况下表示的意思是一致的，都是像素密度。

分辨率

分辨率指的是设备横向和纵向的像素点数量，比如1920x1080分辨率的屏幕，横向上共有1920的像素点，纵向上共有1080个像素点。

Retina

Retina Display即视网膜屏幕，是苹果从iPhone4开始提出的一个概念，因为PPI太高，人的视网膜无法分辨屏幕上的像素点，所以叫视网膜屏幕。iPhone 4的PPI是326，比iPhone 3G的163提高了一倍，所以在非Retina屏幕上的一个像素点在Retina屏幕上会用4个像素去渲染。

pt、dp和sp

随着移动设备的发展和增多，各设备的PPI也各不相同，如何保证同样的内容，比如一个按钮在各设备显示出来的物理尺寸是一致的，就成了一个问题。为了解决这个问题，需要一个与设备无关的基准单位来统一各种尺寸，这便是pt、dp和sp的由来。

pt（point），是iOS使用的基准单位，也叫逻辑像素，规定在PPI为163的情况下，1px的长度为1pt，此时1pt=1px。在PPI为326的情况下，1pt的长度填充了2个像素，这时1pt=2px。
dp（device independent pixel），设备无关像素，是android使用的基准单位，规定在PPI为160的情况下，1px的长度为1dp，此时1dp=1px。
sp（scale independent pixel），缩放无关像素，是Android用来描述字体大小的基准单位。

注：iOS无论字体还是其他内容，都用pt作为基准单位。pt在印刷上还用来表示字型的大小，就是我们常说的点，也叫磅，1pt=1/72英寸，这里的pt和iOS基准单位pt是两回事。

IOS的移动适配

以iPhone为例，至今出现过的不同分辨率的iPhone设备有：

iPhone3G/S：320x640 px，163 ppi；
iPhone4/S：640x960 px，326 ppi；
iPhone5/S：640x1136 px，326 ppi；
iPhone6/S：750x1334 px，326 ppi；
iPhone6 plus：1080x1920 px，401 ppi；

在163ppi下，1pt=1px，逻辑像素pt和实际显示的像素是一比一的关系，所以设计图多大，显示的就是多大。而在326ppi下，1pt=2px，1pt的长度下显示的是2个像素，所以设计图需要放大一倍才能使得显示在屏幕上的物理尺寸和原来的一样大，这便是所谓的二倍图。iOS规定，name.png为非Retina资源（163ppi），[email protected]为Retina资源（326ppi），所以在设计的时候，iPhone4，iPhone5和iPhone6（iphone6 plus除外）都是都需要切二倍图。

iPhone6 plus有些特别，需要单独来说。它的ppi是401，401/163=2.46，理论上需要的2.46倍图，然而这个数字太坑了，这么干设计师和开发人员都要疯了。那怎么办呢？苹果给出了个折中的方案，设计的时候按照三倍图来设计，即1242 x 2208px，然后系统自动将其压缩至接近@2.46x的大小（实际压缩至@2.62x左右）。虽然iPhone6 plus的分别率是1080 x 1920，你会发现截屏截出的图片实际上是1242 x 2208px，也是这个原因。

Android的移动适配

Android是开放系统，设备的差别更加大，它的PPI划分也更加细：