藍(lán)藍(lán)設(shè)計(jì)( www.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

來(lái)源：莫貝網(wǎng)

剛開(kāi)始接觸移動(dòng)頁(yè)面重構(gòu)，是不是很迷惑應(yīng)該按照多大的尺寸制作？320、640還是720？按照640的設(shè)計(jì)稿重構(gòu)完頁(yè)面，是不是還需要寫(xiě)其他尺寸來(lái)適配不同的屏幕大小？—— 這源于對(duì)viewport和px的不了解。

已經(jīng)重構(gòu)了好多移動(dòng)頁(yè)面，但是對(duì)為什么要按照640的大小來(lái)設(shè)計(jì)頁(yè)面，不清楚答案。給元素賦予固定的像素值，但是奇怪的是在不同的手機(jī)里看起來(lái)都差不多大小，不需要另外去適配，真是太爽了。為什么？不知道耶。——這源于對(duì)viewport和px的不了解。

先來(lái)羅列下學(xué)習(xí)移動(dòng)頁(yè)面重構(gòu)的過(guò)程中可能看到過(guò)迷糊過(guò)放棄過(guò)的一些單位：

px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……

接下來(lái)分類(lèi)給大家介紹下：

① 什么是絕對(duì)長(zhǎng)度單位？什么是相對(duì)長(zhǎng)度單位？

② 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？

③ 什么是ppi、dpi、dp、dip、sp、px？他們之間的關(guān)系是什么？

④ 什么是mdpi、hdpi、xdpi、xxdpi？如何計(jì)算和區(qū)分？

1、什么是絕對(duì)長(zhǎng)度單位？什么是相對(duì)長(zhǎng)度單位？

絕對(duì)長(zhǎng)度單位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。in、cm、mm和實(shí)際中的常用單位完全相同。 pt是標(biāo)準(zhǔn)印刷上常用的單位，72pt的長(zhǎng)度為1英寸。pc也是印刷上用的單位，1pc的長(zhǎng)度為12磅。絕對(duì)長(zhǎng)度單位，雖然理解起來(lái)很容易，但是在網(wǎng)頁(yè)的 設(shè)計(jì)中很少用到。所以我們就忽略它們吧。

相對(duì)長(zhǎng)度單位：是網(wǎng)頁(yè)設(shè)計(jì)中使用最多的長(zhǎng)度單位，包括px、em、rem等。

2、什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ 

屏幕尺寸：指屏幕的對(duì)角線的長(zhǎng)度，單位是英寸，1英寸=2.54厘米。常見(jiàn)的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。

屏幕分辨率：指在橫縱向上的像素點(diǎn)數(shù)，單位是px，1px=1個(gè)像素點(diǎn)。一般以縱向像素*橫向像素來(lái)表示一個(gè)手機(jī)的分辨率，如1960*1080。（這里的1像素值得是物理設(shè)備的1個(gè)像素點(diǎn)）

屏幕像素密度：屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量，單位是ppi，即“pixels per inch”的縮寫(xiě)。屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)，在單一變化條件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

最明顯的就是iPhone 3GS和iPhone 4的區(qū)別。屏幕尺寸一樣，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。

計(jì)算像素密度的公式：

勾股定理算出對(duì)角線的分辨率：√(19202+10802)≈2203px

對(duì)角線分辨率除以屏幕尺寸：2203/5≈440dpi。

3、什么是ppi、dpi、dp、dip、sp、px？

ppi：pixels per inch，屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量，即屏幕像素密度。

dpi：dots per inch，最初用于衡量打印物上每英寸的點(diǎn)數(shù)密度，就是打印機(jī)可以在一英寸內(nèi)打多少個(gè)點(diǎn)。當(dāng)dpi的概念用在計(jì)算機(jī)屏幕上時(shí)，就稱(chēng)之為ppi。ppi和dpi是同一個(gè)概念，Android比較喜歡使用dpi，IOS比較喜歡使用ppi。

dp、dip：dp和dip都是Density Independent Pixels的縮寫(xiě)，密度獨(dú)立像素，可以想象成是一個(gè)物理尺寸，使同樣的設(shè)置在不同手機(jī)上顯示的效果看起來(lái)是一樣的。

在Android中，規(guī)定以160dpi為基準(zhǔn)，1dp=1px。如果密度是320dpi，則1dp=2px，以此類(lèi)推。

Android和IOS都會(huì)通過(guò)轉(zhuǎn)換系數(shù)讓控件適應(yīng)屏幕的尺寸。一個(gè)按鈕給了44*44dp的大小，在160dpi密度的時(shí)候，按鈕就是44*44px大小；在320dpi密度的時(shí)候，按鈕就是88*88px的大小。不需要我們?nèi)?shū)寫(xiě)多套尺寸。

sp：scale independent pixels，用法與dp類(lèi)似，是專(zhuān)門(mén)用來(lái)定義文字大小的，受用戶(hù)android設(shè)備字體設(shè)置的影響。

px：就是通常所說(shuō)的像素，使網(wǎng)頁(yè)設(shè)計(jì)中使用最多的長(zhǎng)度單位。將顯示器分成非常細(xì)小的方格，每個(gè)方格就是一個(gè)像素。（網(wǎng)頁(yè)重構(gòu)中使用的px和屏幕分辨率的px不一定是一樣的大小。）

4、什么是mdpi、hdpi、xdpi、xxdpi？

Google官方指定按照下列標(biāo)準(zhǔn)區(qū)分不同設(shè)備的dpi：

蘋(píng)果的區(qū)分則更為簡(jiǎn)單：非高清屏、高清屏、超高清屏。

從數(shù)值上看，蘋(píng)果和安卓有這樣的對(duì)應(yīng)關(guān)系：

單位介紹完了。總結(jié)下如何使我們更好的理解自己的工作。我們重構(gòu)移動(dòng)頁(yè)面的時(shí)候使用px其實(shí)跟安卓開(kāi)發(fā)中使用dp是一樣的，有個(gè)背后的系數(shù)會(huì)幫我們 把數(shù)值適配到這款手機(jī)的大小。而這個(gè)系數(shù)就是上圖的1x、2x、3x……這個(gè)系數(shù)怎么來(lái)？是依靠分辨率和屏幕尺寸計(jì)算到的屏幕像素密度，再看屏幕像素密度 屬于哪個(gè)系數(shù)等級(jí)。

以上是單位的介紹，下面再來(lái)認(rèn)識(shí)個(gè)重要的知識(shí)點(diǎn)。

Viewpoint

手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的“窗口”（viewport）中，窗口可大于或小于手機(jī)的可視區(qū)域，一般手機(jī)默認(rèn)viewport大于可視區(qū)域。這樣不會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局，用戶(hù)可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的其他部分。

部分機(jī)型默認(rèn)viewport大小：

我們可能會(huì)這樣設(shè)置viewport：

每個(gè)設(shè)置對(duì)應(yīng)的是：

 

這個(gè)頁(yè)面背景圖是作為背景給了background-size:100%;的，所以整好鋪滿整個(gè)屏幕，大小看起來(lái)很適合。而上面的元素使用固定的px值來(lái)賦予大小的，例如左上角的人頭給了width:100px;height100%;。為什么兩者分別是這樣子顯示的？

網(wǎng)頁(yè)重構(gòu)時(shí)使用的單位px，就是通常所說(shuō)的像素，是網(wǎng)頁(yè)設(shè)計(jì)中使用最多的長(zhǎng)度單位。將顯示器分成非常細(xì)小的方格，每個(gè)方格就是一個(gè)像素（這和我們理解的屏幕分辨率的1920px*1080px的px是不同的）。不同設(shè)置下，方格的大小不一樣。

例如iPhone4S如果不設(shè)置viewport，他就會(huì)默認(rèn)是980px，就像把屏幕分成980份（不是屏幕分辨率的640px哦！）。如果設(shè)置一個(gè)元素為100px*100px，看起來(lái)就是屏幕的100/980，可能如下圖所示：

例如iPhone4S如果設(shè)置viewport width=device-width，他就會(huì)是320px，就像把屏幕分成320份（不是屏幕分辨率的640px哦！）。如果設(shè)置一個(gè)元素為100px*100px，看起來(lái)就是屏幕的100/320，可能如下圖所示：

 

未設(shè)置viewport，彈出來(lái)的都是設(shè)備的默認(rèn)寬度，基本是980px，除了最后一臺(tái)三星老爺機(jī)是800px。

設(shè)置了viewport，width=device-width，彈出來(lái)的是設(shè)置好的寬度，375px、360px、320px。為什么是這個(gè)大小？這就要用到上面講的知識(shí)點(diǎn)了。

iPhone6的屏幕分辨率是1334*750px，ppi是326，所以系數(shù)是2x。那device-width就等于750/2=375px。

紅米1s的屏幕分辨率是1280*720px，ppi是312，所以系數(shù)是2x。那device-width就等于720/2=360px。

頁(yè)面里的紅色塊給的是200*200px，在幾個(gè)設(shè)備看起來(lái)好像差不多大的樣子。

（上圖左邊是三星note4，右圖是紅米1s）

三星note4的屏幕分辨率是2560*1440px，ppi是515，所以系數(shù)是4x。那device-width就等于 1440/4=360px，和小米的divice-width一樣大小。但是看起來(lái)左邊的紅色塊明顯大于右邊，因?yàn)樽筮叺脑O(shè)備大啊，雖然兩者都是分成 360份，但是明顯左邊的1份比右邊的1份大。

以上解釋了為什么給元素賦予固定的像素值，給字體16px的大小，在大部分手機(jī)里居然能看起來(lái)差不多大小，也明白了我們并不需要寫(xiě)其他尺寸來(lái)適配不同的屏幕大小。不知道我這樣拐彎的解釋大家能明白不？

對(duì)于應(yīng)該按照多大的尺寸來(lái)設(shè)計(jì)移動(dòng)網(wǎng)頁(yè)，這個(gè)看設(shè)計(jì)師喜歡，640是以前的主流，因?yàn)楹枚嘣O(shè)計(jì)師用的是iPhone4S、5S。現(xiàn)在在慢慢轉(zhuǎn)向 750，因?yàn)閕Phone升級(jí)成6了。不管哪種尺寸的設(shè)計(jì)稿，重構(gòu)都可以用一套方法制作好頁(yè)面，如果是背景平鋪（background- size:100%）、上面的元素px設(shè)置大小的話，沒(méi)問(wèn)題，能順利適配其他手機(jī)的。如果是固定整體大小重構(gòu)，再利用js判斷屏幕大小進(jìn)行頁(yè)面縮放，也沒(méi) 問(wèn)題，能順利適配其他手機(jī)的。重要的前提是要設(shè)置好正確的viewport。

原文地址：tgideas.qq