前言：上一篇文章講解了像素的一些基本概念，如果你需要完全弄明白還是需要一點時間去理解。尤其當你不斷深入去了解時，才會發(fā)現(xiàn)像素比我們想象中的要復(fù)雜，因為像素不僅涉及到軟件技術(shù)，還有硬件技術(shù)。
實戰(zhàn)
這里我們以現(xiàn)在最為火爆的小程序來演示。
假設(shè)現(xiàn)在在IPhone6（750*1334）上面開發(fā)了一個小程序，設(shè)計師給了你一套寬度為750px的圖片，現(xiàn)在將圖片設(shè)置進入程序中，如果在程序中寬度你設(shè)置成750px，你會發(fā)現(xiàn)圖片只顯示了一半。為什么只顯示一半？那么寬度應(yīng)該設(shè)置成多少？
應(yīng)該設(shè)置成 375px，width設(shè)置的 px簡單的理解就是對應(yīng)設(shè)備的顯示屏寬度，如果設(shè)置成750，實際還有一半在屏幕的外面，就像被拉長，自己腦補一下，750 * 1334是 iPhone的邏輯分辨率，上一講我們已經(jīng)說明了在知道設(shè)備的邏輯分辨率、屏幕尺寸（iPhone6是4.7 inch）和設(shè)備的 PPI(iPhone6的PPI=326 )是可以求出對應(yīng)的設(shè)備屏幕的寬高 375 * 667（指實際長度）。具體當然不用你自己去求，在第一張圖中已經(jīng)給出，分辨率（pt）和分辨率（px）的關(guān)系，Reader @2x ，意思就是說一個物理像素點可以包含兩個邏輯像素點。這就是iPhone6 物理分辨率和邏輯分辨率對應(yīng)的關(guān)系。
現(xiàn)在將寬度修改過來了，設(shè)置成375px，問題解決，那么為什么設(shè)計師給出的是750的像素寬，而不是直接給你375px？
上面理解的時候，很容易將圖片的像素帶入進去，然后一切都亂七八糟了。那么我們將圖片換成375 * 667的可以嗎？當然可以，只是顯示的效果沒有 750 * 1334的好，這里重點是width的寬度你不能設(shè)置錯。當你把寬度設(shè)置成 750px時，簡單的理解就是圖片被拉長了一倍，然后屏幕只能顯示 375的寬度，另外一半顯示不了。
現(xiàn)在假如我們換成iPhone6 plus（828*1472），或者其它分辨率不同的手機，顯示出現(xiàn)白邊怎么辦？
*這就是移動設(shè)備分辨率適配問題了，蘋果設(shè)備還行，Android設(shè)備就麻煩多了，當然Android設(shè)備的同時也提出了很多新的適配方案這里就不介紹了，我們依然以蘋果微信小程序的適配的解決方案為例，在微信小程序中引入了rpx這個單位，在Android用的是dp，在ccs中用的rem，在蘋果中用的pt這個單位，蘋果是以iPhone6 *
rpx的作用是什么?
這個單位是小程序為不同分辨率的適配指定的一個單位，當然制定這個單位就一定會有一個參照，在蘋果中，rpx就是以iPhone6 的標準進行制作的，也就是1rpx=1px=0.5pt，現(xiàn)在使用rpx作為單位，在不同的分辨率底下小程序會自動進行轉(zhuǎn)換，而使用px則不會?，F(xiàn)在將同樣的程序部署在iPhone6 plus中那么1px=0.6rpx，Android設(shè)備中dp、蘋果的pt、css中的rem都是同樣的道理。
