關鍵之 :px 像素? rpx 微信 rem? em? 適配
開始寫這文章，也是這兩天遇到了個小問題，網上找了些答案，但解釋不是很易懂，所以就有這篇文章．以下內容你將獲得如下知識
什么是像素px, px ,ren ,em 以及在什么情況下使用,本文盡量減少專業術語,爭取看完就記住.
ＰＸ:一般教程里會說像素和分辨率有關，你又要去理解分辨率，這里我帶著不嚴謹的說法給你個通俗易懂的解釋，現在電腦分辨率是在１９２０*１０８０，你就把他理解成長1920,寬1080,那1個像素大小,就是長1寬1,實際你要量1像素多大,那個尺子量你們家顯示屏高度/1080就是1像素多少，如果是搞印刷的就要很關心１像素到底多大，有時弄巨型戶外廣告，ＰＳ里設置屏幕分辯率（網頁７２），就影響著１像素到底是２０厘米還是２厘米．所以像素這東西并不是絕對多大，因為我們是在做網頁所以不用去考慮其他的，就將像素定死，12像素就是word中小四的大小．
REM是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em
em（font?size?of?the?element）是指相對于父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
REM 電腦端依據是根元素 HTML標簽, 在HTML中設置文字大小，后面字體可以依他為依據設置倍數。
在實際開發中,更多的是直接使用像素來使用,之前我有做個一個統計,網頁中使用字體大小的范圍.．如果是正文不問基本會用標準14像素，導航欄，會在１２像素在１４像素之間，１２像素居多．大多數情況下，多會使用像素居多．好景不長，這幾年間手機端的大量出現，移動浪潮發展的速度，超過電腦端的發展．網站要適應手機觀看．原本布局很好的頁面，到手機一轉，布局結構亂了，字體大小完全兩樣了．(尤其是設置浮動元素)
iPhone6 的像素是在375*667,這個跟電腦比印象會是這樣,但是實際手機屏幕會比較小,因為兩個計算方式不一樣．怎么不一樣，天知道．不過可以告訴你怎么計算出寫在手機里的字體大小，實際我們要跟像素結合在一起，在來復習一下，電腦端的1080怎么算長, 聰明的你頓悟了沒，手機寬375像素，一行中能最多容下26個14像素的字體外化，如果做手機端頁面建議還是以蘋果５為基準３２０像素做（尤其是導航，適配較小的，等比例分配寬度，不容易發生溢出現象，這只是經驗之談）．
那RPX 是什么鬼，在這世界上總有一群人想著改變生活，即使他們不是處女座．還是以蘋果6為例，看蘋果６在和其屏幕大小一致的前提下，你會覺得他看起來會比其他機器清晰度來的高．有時還會出現字體發虛現象，同等物理像素，利用簡稱高科技，將這個像素變為７５０*１３３４，這個單位就是rpx, 我講的很不嚴謹，RPX 盡量少用，但是微信小程序里官方介紹使用，總之我是不會用它的，１rpx 在手機里有地方是不顯示的．以下是微信文檔換算單位
EM? 如果是網站,那em是很好理解，只要定義了html 字體大小，就以他為基準，這樣就很方便設置整體字體比例大小，不用每個地方都改，但是當他來到小程序時，ＥＭ的根在哪里，微信他爹定義好了，這點是今天坑發現，微信做法是將整個屏幕寬度進行等比劃分成２０等份（１等分＝１ｒｅｍ），你要問我有多大，我真不知道，萬一你拿的是ＩＰａｄ呢，注意哦，我這句開玩笑就是微信使用EM得殺手锏，適配手機各種尺寸，你大我大，你小我小，微信競爭對手是ＡＰＰ，APP很多程序用IPad 看效果是很差的，微信推出這個等比字體大小很好的做到這一點，(另外20個等比,這個怎么跟阿里的另一框架antdesgin一樣,難道是同門師兄)如果你的客戶用IPAD 少的話,就不用考慮.
總結應用場景:
px: 通殺, 但在中等設備(平板,iPad,表現就不是很好)
rpx :新技能，應用場景較少，主要小程序上的新鮮
em: 網頁, 手機移動端內容中的層級嵌套,通過設置字體的比例設計層次
rem: 網頁,手機移動端適配, 微信中主要適配IPAD
