十分钟弄懂px pt ppi dpi dp sp dot rem!



UI设计创意分享 2018-07-06 16:06:15

本文针对px,pt,ppi,dpi,dp,sp等不易理解又容易混淆的单位,做一次全面深入又通俗的讲解,相信没有基础的小白都能明白。

入行以来,关于分辨率、像素、英寸的一堆乱七八糟的东西,是让我最头疼的事,这个那个傻傻分不清楚。于是下定决心,要做一个最全面易理解的分析,一次吃透,来来来,干货吃起来~~

十分钟弄懂px pt ppi dpi dp sp dot rem!

先说像素px,这位大兄弟是最常露脸的。不管是在设计还是摄影中,都能找到他的身影。那么他究竟是啥呢?

说白了,它就是一个点,一个像素点。这个点呢,大小不固定,颜色也不固定,因为它是一个相对单位,在不同的密度单位下就能变大变小(密度单位是啥?别着急,下文会有解释)。同样是1英寸的屏幕,密度越大,像素越多,则单个像素的物理尺寸越小。

想想同样的一块地,如果种的菜特别多,大家都挤一块,是不是都不容易长很大,而如果种的少,每颗菜菜均摊的面积大,是不是就能长得更大一点呢?所以,这里大家要记住,像素不是物理世界的单位(比如长度面积单位),它的物理尺寸也不固定,有意义的是它的数量(想象这是一颗可大可小的白菜),数量决定一切。

十分钟弄懂px pt ppi dpi dp sp dot rem!

在屏幕尺寸一定的情况下,密度越大,像素数量越多。这时候,显示效果就会越清晰。

十分钟弄懂px pt ppi dpi dp sp dot rem!

通常我们说一张100kb大小的图片,其实指的是图片的体积。一张图像在存储时,会描述每个像素点的颜色信息、位置、数量,这些描述数据就是图像的体积,如果像素越多自然图像体积越大。

总结:像素可以用来描述显示器的分辨率和图像的尺寸。

十分钟弄懂px pt ppi dpi dp sp dot rem!

说到px,就要提到pt了。你看它俩长得挺像,是不是也差不多呢?

pt也是一个点,但是这个点它不依靠别人,它就是一个堂堂正正的物理单位,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸=0.35mm,大小固定。

现在来计算一下,什么情况下1px=1pt呢?

根据公式像素量px = 像素密度ppi x 屏幕尺寸in可得,当像素量为1px,屏幕尺寸为1/72英寸时,分辨率ppi为72。也很容易算出,当分辨率为144ppi时,1pt=2px。

不对啊,我记得IOS的字体单位不也是pt吗?你咋没说呢?是的。pt也是iOS系统的开发单位,而且是长度固定的,不随屏幕像素密度ppi变化而变化。

苹果公司规定,当ppi(后续有解释)是163时,1px=1pt,那么pt=1/163英寸=0.16mm(固定值)。大家知道163是哪些手机的ppi吗?

另外再提一点,大家都知道iOS推荐的最小可点击元素的尺寸是44*44 px。为什么是这个尺寸呢?我们来计算一下,以iPhone 4为例,它的屏幕ppi是163px(一英寸长度里有163像素),1英寸=25.4mm,1英寸=163px,用户在屏幕中可点击的物理尺寸是7mm-9mm,所以屏幕最小可点击区域=7*163/25.4=44.9px,也就是我们常说的44px。

十分钟弄懂px pt ppi dpi dp sp dot rem!

十分钟弄懂px pt ppi dpi dp sp dot rem!

这下大家也知道啦,这个44px只是相对的长度,随着屏幕ppi的改变会改变。如果不懂不这个可能就会死抓着这个44px不变,在任何分辨率的屏幕中都是使用44px,这明显是不对的。

十分钟弄懂px pt ppi dpi dp sp dot rem!

好啦,终于要说ppi啦,它是一个密度单位,英文pixels per inch,每英寸所包含的像素数目。

数学没学好的人,我这里来科普一下密度(其实是我不理解,哈哈)。让我们回到中学时代,我们常常听到长度单位,像什么厘米、米、千米、英寸,面积单位有平方米、亩、公顷,体积单位立方米、升,密度单位有1千克/立方米, 1克/立方厘米等。老铁们,发现木有,密度单位它不能实质地衡量一个物体,它必须和其他的单位结合才能描绘出一个物体的大小。这里的ppi也一样,刚才我们已经说过,像素不是固定大小的,它是随着密度变化而变化的,ppi越大,像素越多,图片显示越清晰。再看一遍公式像素量px = 像素密度ppi x 屏幕尺寸in。ppi和面积结合才能描绘像素的多少。

因为ppi决定了图片的物理尺寸。比如一个手机显示屏,它的ppi在手机出厂的时候就已经确定了。它的计算公式为:ppi=屏幕对角线上的像素量px/对角线长度inch = √(屏幕横向像素^2 + 屏幕纵向像素^2)/对角线长度。给你一张图,你就知道怎么算啦。

十分钟弄懂px pt ppi dpi dp sp dot rem!

十分钟弄懂px pt ppi dpi dp sp dot rem!

比如 iphone6的ppi是多少?ppi=√(750px² + 1334px²)/4.7in=326ppi。

这里的英寸(in),大家都知道吧,不知道的举一下爪。很好,你成功吸引了我的注意。它就是一个长度的度量单位,表示的是实际的物理大小,和厘米、米一样,大小固定的哦。在手机上,是指屏幕对角线的长度。

来,计算一下iphone6p的ppi,告诉你分辨率是1242*2208,对角线尺寸是5.5,那么它的ppi是多少呢?答案在文末。

其实我们日常所说的分辨率有两个概念。一个指显示器的分辨率,另一个指图像的分辨率。

显示器分辨率指显示器所能显示的像素多少。屏幕尺寸一定时,分辨率越大,像素密度越大,显示器可显示的像素越多,画面就越精细。

图像分辨率则是单位英寸中所包含的像素点数,比如photoshop 里新建画布时设置的图像分辨率300ppi,其定义更趋近于分辨率本身的定义。

十分钟弄懂px pt ppi dpi dp sp dot rem!

说完了ppi,再来说跟它长得很像的dpi,它也是一个密度单位,英文dots per inch,每英寸所包含点的数目,因为它是用在打印设备上,所以它描绘的是打印精度,1英寸所能打印的墨点数量, 值越大,印刷越精细。那么移动端看不看它呢?不,我们看都不看一眼~~

十分钟弄懂px pt ppi dpi dp sp dot rem!

说完了前面的四个常见易混淆的家伙,那么dp,sp,rem又是什么呢?别着急,待我一一给你讲解。

刚才说到pt是IOS的开发单位,那么安卓的开发单位是啥呢?没错,就是dp啦。dp,英文Density-independent pixel,它也是一个固定长度的单位。那么它和px又是怎么换算的呢?

根据不同的屏幕分辨率,与px有不同的倍数关系。规定:1dp等于屏幕像素密度为160ppi时1px的长度。公式:1dp=(屏幕ppi/ 160)px,因此dp在整个系统大小是固定的。

十分钟弄懂px pt ppi dpi dp sp dot rem!

因为在安卓中有很多dp的兄弟姐妹啊,那么这时候又咋算呢?

十分钟弄懂px pt ppi dpi dp sp dot rem!

现在我们知道,mdpi就是屏幕像素密度为160,那么就以它为标准吧,这些屏幕密度的比值是:ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3。

android中清屏1dp=1px,高清屏1dp=1.5px,超清屏1dp=2px。

一般我们做设计时以xhdpi为模板, xhdpi条件下1dp=2px,标注长度的时候,将长度像素除以2即为dp值,这样方便和开发沟通。

十分钟弄懂px pt ppi dpi dp sp dot rem!

那么sp又是什么呢?sp也是安卓大家庭中的一名成员哦。英文scale-independent pixel,是安卓开发用的字体大小单位。

那么它和dp有关系不?有啊,大大的有。dp是长度单位,sp是字体单位,表示大小。一般情况下都认为sp=dp。

为什么要把sp和dp代替px?最简单的原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。

十分钟弄懂px pt ppi dpi dp sp dot rem!

dot又是啥东东?它中文名可叫做墨点,是印刷品的最小单位,表示一个印刷颜色点,类似px,只有相对大小,用在印刷行业。

是不是想起之前的dpi了?对头。印刷尺寸(英寸)=打印墨点数(dot)/打印机密度(dpi)。

机智的你是不是想到了打印照片的时候,怎样的设置才能使打印的照片更清晰呢?答案就是清晰度是由打印机分辨率决定的啦。一张像素很多也就是很清晰的照片,你得用高dpi打印机才可以打印出清晰的图片。

十分钟弄懂px pt ppi dpi dp sp dot rem!

再来说说rem,其实它与我们设计人员关系并不大,主要是前端开发们使用的单位,但是也可以了解一下。

它有一点像%的用法。举个栗子,先说一个常识,浏览器的默认字体高都是16px。这时100%=16px,那么1px=6.25%,10px=62.5%,同理这里的1rem=10px,2rem=20px。px与rem的转换通过10就可以换算得来,rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可。

一般情况下,是这样子使用的

十分钟弄懂px pt ppi dpi dp sp dot rem!

十分钟弄懂px pt ppi dpi dp sp dot rem!

1、px和dot

都是点的概念,px应用在电子显示设备上,是显示图像的基本单位。dot应用在印刷行业,是打印图片的基本单位。

2、ppi和dpi

ppi和dpi无关系,互不影响 。

ppi影响图像的显示尺寸,dpi影响图像的打印尺寸。打印时可以让数量上px=dot,则设计时在photoshop里设置的ppi大小,可以认为是dpi大小。很多技术人员经常把ppi和dpi画等号, 其实他们的物理意义不一样,但是因为混淆的人多了,所以在电子屏幕显示中提到的ppi和dpi我们可以认为是一样的。

既然打印的分辨率dpi是由实际的打印机决定的,那为什么在设计印刷品时还要在ps里设置分辨率ppi呢?是的,设置分辨率并没有意义。但是我们可以预期打印效果啊,比如多大的分辨率和尺寸,有了这两个值就能确定像素量px,即,只要像素量满足要求,就能打印出预期的效果。所以ps里设置分辨率ppi是为了让ps计算出像素量大小。

photoshop里,高ppi和低ppi画布的显示差别? Photoshop里的显示大小只和图像的像素量和显示器分辨率有关。显示器是确定的,所以像素量越大,显示尺寸越大。

十分钟弄懂px pt ppi dpi dp sp dot rem!

上文中iphone 6p的ppi是401,你计算出来了吗?

关于px、pt、ppi、dpi、dp、sp、dot、rem的讲解就到这里啦,你还有什么不理解的地方吗?欢迎加群587751709留言讨论学习哦!



0