【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等。大家手上有别的机型也可以算算自己的手机的图片是多少倍的。