【UI設(shè)計基礎(chǔ)知識】移動端適配原理有哪些需要注意的

首先我們先要了解什么是PX，這個大家還算比較熟悉，像素，是構(gòu)成圖像的基本單位，一個圖像，上面的像素點越多，你的眼睛看到的圖像就越清晰。一個圖像長度上有1200個像素，寬度上有900個像素，那這個圖像就是由高900PX，寬1200PX組成的圖像。那就引出分辨率的問題，分辨率的概念是什么?分辨率就是一個圖像的屏幕競速，這個圖像是由多少個像素組成的。那高900PX，寬1200PX組成的圖像的分辨率就是900×1200像素。

我們現(xiàn)在討論適配的問題，是移動端的適配，移動端的典型例子就是手機，那最近新出的iOS手機就是iPhone11，安卓手機的尺寸比較多。那iPhone11的手機屏幕分辨率是什么呢，官網(wǎng)顯示iPhone11的手機屏幕分辨率是1792×828像素。也就是這個手機的屏幕是高度上有1792個像素，寬度上有828像素。

下面的內(nèi)容要注意啦，一定要理解。

官網(wǎng)顯示iPhone11的手機屏幕分辨率是1792×828像素。官網(wǎng)也顯示iPhone 11 顯示屏采用曲線優(yōu)美的圓角設(shè)計，四個圓角位于一個標(biāo)準(zhǔn)矩形內(nèi)。按照標(biāo)準(zhǔn)矩形測量時，屏幕的對角線長度是 6.06 英寸 (實際可視區(qū)域較小)。

英寸是什么，是物理計量單位，像素是什么，像素跟屏幕的清晰度有關(guān)系。

那一個換算可以把兩者聯(lián)系起來，那6.06英寸是對角線的長度，那對角線上有多少個像素，大家能算出來嗎?

大家還記得我們上學(xué)的時候?qū)W過的勾股定理，X²Y²=Z²，我們知道iPhone11手機的寬高的像素的，那我們就可以算出來對角線的像素值。

1792²+828²=3211264+685584=3896848

²√3896848=1974.043565881969

這個數(shù)值就是對角線上的像素點數(shù)了，那一共有6.06英寸，每個英寸上有多少個像素呢?

1974.043565881969÷6.06=325.7497633468596

按照四舍五入取整數(shù)，這個數(shù)值等于326。

蘋果官網(wǎng)的顯示是iPhone11是326PPI，那PPI是什么。

PPI是像素密度，以每英寸的像素數(shù)值評判每英寸的像素密度是多少。

那iPhone11每英寸的像素是326，就是iPhone11的屏幕密度是326.

今天先把這些概念給大家講清楚，后面我們再把326PPI跟@1X、@2X、@3X聯(lián)系起來。