【UI設(shè)計(jì)基礎(chǔ)知識】設(shè)計(jì)時(shí)移動端適配原理是什么

一說到PPI，好像大家都會想到DPI。DPI是什么意思呢?DPI表示每英寸有多少個(gè)點(diǎn)。PPI表示每英寸有多少個(gè)像素。

那點(diǎn)是什么?點(diǎn)是印刷單位，就是每英寸(2.54厘米)上面有多少個(gè)油墨點(diǎn)。

當(dāng)然，在Android系統(tǒng)中，DPI就是像素/每英寸,跟PPI是一個(gè)概念。Android系統(tǒng)真的是為所欲為呀。但是沒辦法，Android就是這么用了，咱們只能這么去理解了。

那為什么會有@1X、@2X、@3X的概念呢?主要是因?yàn)锳ndroid機(jī)型太多了，一個(gè)圖片，要想放在所有的Android手機(jī)上，那得切多少張大小不一的圖片呀，要累死切圖的設(shè)計(jì)，上傳圖片的程序員的頭發(fā)掉的也更快了吧。哈哈哈哈哈哈哈，所以，Android出了一套規(guī)則，好方便他們統(tǒng)一圖片。

Android提出一個(gè)新的概念，DP。DP是Android為了使得開發(fā)者設(shè)置的長度能夠根據(jù)不同屏幕DPI/PPI使用不同的像素(px)的圖像以保證不同機(jī)型圖像在視覺上統(tǒng)一的單位，你可以理解為DP為物理點(diǎn)，PX是像素點(diǎn)，一個(gè)物理點(diǎn)上可能有幾個(gè)像素點(diǎn)。

有一個(gè)公式：dp=(dpi/(160像素/英寸))px

Android提出的這個(gè)概念DP在iOS上同樣適用。

那如果DPI的數(shù)值是160，那1DP=1PX;如果DPI的數(shù)值是320，那1DP=2PX;如果DPI的數(shù)值是480，那1DP=3PX;

好，大家理解一下下面的信息：假如一個(gè)物理點(diǎn)上有1個(gè)像素，那一個(gè)30X30PX的圖像正常上傳到屏幕上。假如一個(gè)物理點(diǎn)上有2個(gè)像素，那一個(gè)30X30PX的圖像，為了保證圖片看起來同樣大小，是不是要上傳一張60X60PX的圖像才能看起來跟上一個(gè)圖同樣大小。同理假如一個(gè)物理點(diǎn)上有3個(gè)像素，那一個(gè)30X30PX的圖像，為了保證圖片看起來同樣大小，是不是要上傳一張90X90PX的圖像才能看起來跟上一個(gè)圖同樣大小。

那這樣在30是30的1倍，60是30的2倍，90是30的3倍，所以規(guī)范上講@1X 表示一倍,@2X表示2倍 ,@3X表示3倍。

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

既然引進(jìn)DP這個(gè)概念是為了適配，所以在適配的時(shí)候，如果PPI/DPI的數(shù)值接近于那個(gè)就用哪個(gè)倍數(shù)。326PPI接近320，所以iPhone11是用的@2X圖。

再深一些的知識，PX表示像素，一個(gè)點(diǎn)上像素越多，肯定就清晰。那iPhone手機(jī)，用@1X圖的機(jī)型有iPhone3Gs;用@2X圖的機(jī)型有：iPhone4/4S/4/5S/6/6S/7/8等;用的@3X圖的機(jī)型有：iPhone6/6S/7/8Plus、iPhoneX等。大家手上有別的機(jī)型也可以算算自己的手機(jī)的圖片是多少倍的。