八维职业学校带你了解UI设计时移动端适配原理是什么?

　　随着信息技术的迅猛发展，移动互联网市场已然成熟，使得UI设计行业的持续走热，让许多企业也顺应市场的要求，对UI设计也越来越重视，几乎每个中大型IT企业都会在产品设计和UI界面设计上加大投资力度，这样的行业发展趋势吸引了越来越多的人参加UI设计工作，也有很多人都通过参加UI设计培训课程来转行UI设计，今天八维职业学校和大家一起来看看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等。大家手上有别的机型也可以算算自己的手机的图片是多少倍的。