AI智能
改变未来

【UI设计基础知识】设计时移动端适配原理是什么

一说到PPI,好像大家都会想到DPI。DPI是什么意思呢?DPI表示每英寸有多少个点。PPI表示每英寸有多少个像素。

那点是什么?点是印刷单位,就是每英寸(2.54厘米)上面有多少个油墨点。

当然,在Android系统中,DPI就是像素/每英寸,跟PPI是一个概念。Android系统真的是为所欲为呀。但是没办法,Android就是这么用了,咱们只能这么去理解了。

那为什么会有@1X、@2X、@3X的概念呢?主要是因为Android机型太多了,一个图片,要想放在所有的Android手机上,那得切多少张大小不一的图片呀,要累死切图的设计,上传图片的程序员的头发掉的也更快了吧。哈哈哈哈哈哈哈,所以,Android出了一套规则,好方便他们统一图片。

Android提出一个新的概念,DP。DP是Android为了使得开发者设置的长度能够根据不同屏幕DPI/PPI使用不同的像素(px)的图像以保证不同机型图像在视觉上统一的单位,你可以理解为DP为物理点,PX是像素点,一个物理点上可能有几个像素点。

                                    

有一个公式:dp=(dpi/(160像素/英寸))px

Android提出的这个概念DP在iOS上同样适用。

那如果DPI的数值是160,那1DP=1PX;如果DPI的数值是320,那1DP=2PX;如果DPI的数值是480,那1DP=3PX;

好,大家理解一下下面的信息:假如一个物理点上有1个像素,那一个30X30PX的图像正常上传到屏幕上。假如一个物理点上有2个像素,那一个30X30PX的图像,为了保证图片看起来同样大小,是不是要上传一张60X60PX的图像才能看起来跟上一个图同样大小。同理假如一个物理点上有3个像素,那一个30X30PX的图像,为了保证图片看起来同样大小,是不是要上传一张90X90PX的图像才能看起来跟上一个图同样大小。

那这样在30是30的1倍,60是30的2倍,90是30的3倍,所以规范上讲@1X 表示一倍,@2X表示2倍 ,@3X表示3倍。

OK,大家明白了@1X、@2X、@3X 的事情,320PPI的图像肯定是@2X图了,但是iPhone11是326PPI,那是几倍?

既然引进DP这个概念是为了适配,所以在适配的时候,如果PPI/DPI的数值接近于那个就用哪个倍数。326PPI接近320,所以iPhone11是用的@2X图。

再深一些的知识,PX表示像素,一个点上像素越多,肯定就清晰。那iPhone手机,用@1X图的机型有iPhone3Gs;用@2X图的机型有:iPhone4/4S/4/5S/6/6S/7/8等;用的@3X图的机型有:iPhone6/6S/7/8Plus、iPhoneX等。大家手上有别的机型也可以算算自己的手机的图片是多少倍的。

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 【UI设计基础知识】设计时移动端适配原理是什么