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

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

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

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

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

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

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

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

1792²+828²=3211264+685584=3896848

²√3896848=1974.043565881969

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

1974.043565881969÷6.06=325.7497633468596

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

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

PPI是像素密度，以每英寸的像素?cái)?shù)值評(píng)判每英寸的像素密度是多少。

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

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