剛開始接觸移動(dòng)頁(yè)面重構(gòu)碱妆，是不是很迷惑應(yīng)該按照多大的尺寸制作？320昔驱、640還是720疹尾？按照640的設(shè)計(jì)稿重構(gòu)完頁(yè)面，是不是還需要寫其他尺寸來適配不同的屏幕大兄韪亍纳本？——這源于對(duì)viewport和px的不了解。
已經(jīng)重構(gòu)了好多移動(dòng)頁(yè)面腋颠，但是對(duì)為什么要按照640的大小來設(shè)計(jì)頁(yè)面繁成，不清楚答案。給元素賦予固定的像素值淑玫，但是奇怪的是在不同的手機(jī)里看起來都差不多大小巾腕，不需要另外去適配，真是太爽了絮蒿。為什么尊搬？不知道耶⊥晾裕——這源于對(duì)viewport和px的不了解佛寿。
=================我是酷酷的分割線==================
先來羅列下學(xué)習(xí)移動(dòng)頁(yè)面重構(gòu)的過程中可能看到過迷糊過放棄過的一些單位：
px、pt但壮、pc冀泻、sp、em蜡饵、rem弹渔、dp、dip验残、ppi捞附、dpi、ldpi您没、mdpi鸟召、hdpi、xhdpi氨鹏、xxhdpi……
接下來分類給大家介紹下：
①?什么是絕對(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)度單位，雖然理解起來很容易模捂，但是在網(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厘米忠寻。常見的屏幕尺寸有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)绞佩。一般以縱向像素*橫向像素來表示一個(gè)手機(jī)的分辨率寺鸥，如1960*1080。（這里的1像素值得是物理設(shè)備的1個(gè)像素點(diǎn)）
屏幕像素密度：屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量品山，單位是ppi胆建，即“pixels?per?inch”的縮寫。屏幕像素密度與屏幕尺寸和屏幕分辨率有關(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í)，就稱之為ppi抖苦。ppi和dpi是同一個(gè)概念毁菱，Android比較喜歡使用dpi，IOS比較喜歡使用ppi锌历。
dp贮庞、dip：dp和dip都是Density?Independent?Pixels的縮寫，密度獨(dú)立像素究西，可以想象成是一個(gè)物理尺寸窗慎，使同樣的設(shè)置在不同手機(jī)上顯示的效果看起來是一樣的。
在Android中卤材，規(guī)定以160dpi為基準(zhǔn)遮斥，1dp=1px。如果密度是320dpi扇丛，則1dp=2px术吗，以此類推。
Android和IOS都會(huì)通過轉(zhuǎn)換系數(shù)讓控件適應(yīng)屏幕的尺寸帆精。一個(gè)按鈕給了44*44dp的大小较屿，在160dpi密度的時(shí)候，按鈕就是44*44px大凶苛贰吝镣；在320dpi密度的時(shí)候，按鈕就是88*88px的大小昆庇。不需要我們?nèi)鴮懚嗵壮叽纭?/p>
sp：scale?independent?pixels末贾，用法與dp類似，是專門用來定義文字大小的整吆，受用戶android設(shè)備字體設(shè)置的影響拱撵。
px：就是通常所說的像素，使網(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：
蘋果的區(qū)分則更為簡(jiǎn)單：非高清屏、高清屏函匕、超高清屏娱据。
從數(shù)值上看，蘋果和安卓有這樣的對(duì)應(yīng)關(guān)系：
單位介紹完了盅惜≈惺＃總結(jié)下如何使我們更好的理解自己的工作。我們重構(gòu)移動(dòng)頁(yè)面的時(shí)候使用px其實(shí)跟安卓開發(fā)中使用dp是一樣的抒寂，有個(gè)背后的系數(shù)會(huì)幫我們把數(shù)值適配到這款手機(jī)的大小结啼。而這個(gè)系數(shù)就是上圖的1x、2x屈芜、3x……這個(gè)系數(shù)怎么來郊愧？是依靠分辨率和屏幕尺寸計(jì)算到的屏幕像素密度，再看屏幕像素密度屬于哪個(gè)系數(shù)等級(jí)沸伏。
以上是單位的介紹，下面再來認(rèn)識(shí)個(gè)重要的知識(shí)點(diǎn)：viewpoint动分。
手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的“窗口”（viewport）中毅糟，窗口可大于或小于手機(jī)的可視區(qū)域，一般手機(jī)默認(rèn)viewport大于可視區(qū)域澜公。這樣不會(huì)破壞沒有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局姆另，用戶可以通過平移和縮放來看網(wǎng)頁(yè)的其他部分。
部分機(jī)型默認(rèn)viewport大蟹厍：
我們可能會(huì)這樣設(shè)置viewport：
每個(gè)設(shè)置對(duì)應(yīng)的是：
這個(gè)頁(yè)面背景圖是作為背景給了background-size:100%;的迹辐，所以整好鋪滿整個(gè)屏幕，大小看起來很適合甚侣。而上面的元素使用固定的px值來賦予大小的明吩，例如左上角的人頭給了width:100px;height100%;。為什么兩者分別是這樣子顯示的殷费？
網(wǎng)頁(yè)重構(gòu)時(shí)使用的單位px印荔，就是通常所說的像素，是網(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，看起來就是屏幕的100/980畔师，可能如下圖所示：
例如iPhone4S如果設(shè)置viewport?width=device-width娶靡，他就會(huì)是320px，就像把屏幕分成320份（不是屏幕分辨率的640px哦？达薄）姿锭。如果設(shè)置一個(gè)元素為100px*100px，看起來就是屏幕的100/320伯铣，可能如下圖所示：
未設(shè)置viewport呻此，彈出來的都是設(shè)備的默認(rèn)寬度，基本是980px腔寡，除了最后一臺(tái)三星老爺機(jī)是800px焚鲜。
設(shè)置了viewport，width=device-width放前，彈出來的是設(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è)備看起來好像差不多大的樣子。
（上圖左邊是三星note4倘是，右圖是紅米1s）
三星note4的屏幕分辨率是2560*1440px亭枷，ppi是515，所以系數(shù)是4x搀崭。那device-width就等于1440/4=360px叨粘，和小米的divice-width一樣大小猾编。但是看起來左邊的紅色塊明顯大于右邊，因?yàn)樽筮叺脑O(shè)備大啊升敲，雖然兩者都是分成360份答倡，但是明顯左邊的1份比右邊的1份大。
以上解釋了為什么給元素賦予固定的像素值驴党，給字體16px的大小瘪撇，在大部分手機(jī)里居然能看起來差不多大小，也明白了我們并不需要寫其他尺寸來適配不同的屏幕大小港庄。不知道我這樣拐彎的解釋大家能明白不倔既？
對(duì)于應(yīng)該按照多大的尺寸來設(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è)置大小的話艇炎，沒問題酌伊，能順利適配其他手機(jī)的。如果是固定整體大小重構(gòu)冕臭，再利用js判斷屏幕大小進(jìn)行頁(yè)面縮放腺晾，也沒問題燕锥，能順利適配其他手機(jī)的辜贵。重要的前提是要設(shè)置好正確的viewport。
參考：
理解Android中dpi和分辨率的關(guān)系归形，談?wù)凙ndroid做成適應(yīng)全部手機(jī)的UI方式
http://blog.csdn.net/ueryueryuery/article/details/20048401
UI設(shè)計(jì)師不可不知的安卓屏幕知識(shí)
http://www.zcool.com.cn/article/ZNjI3NDQ=.html
Android屏幕適配全攻略(最權(quán)威的官方適配指導(dǎo))
http://blog.csdn.net/jdsjlzx/article/details/45891551
移動(dòng)前端開發(fā)之viewport的深入理解
http://www.cnblogs.com/2050/p/3877280.html
iPhone?6?Screens?Demystified
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
如何做跨DPI設(shè)計(jì)
http://www.ui.cn/detail/23624.html
