「史上最全」UI相關尺寸機關詳解 | px、pt、dp、sp、rem、vwvh、rpx、ppi、dpi、dppx
轉載自其他公衆号：基維斯
先給進來看文章的你點個贊
尺寸适配應該由開發同僚負責處理，處理不好是他的問題，你有興趣了解這些讓人頭疼的事，證明你是共産主義好社畜，還有工作量不飽和， Good for you ~
适配問題是影響設計複現的常見問題，在你 Mac 上秀氣的設計圖拿去讓經驗不足的開發寫出來，就有可能變得傻大傻大。你沒錯，開發也很冤，是按着你給的數值做的呀，問題不是數錯了，有可能是尺寸機關用錯了。
怎麼才能做好适配
首先來了解各種尺寸機關
上表囊括所有界面表現常用機關，隻差相容性奇差的「vm」和基本淘汰的「em」
「PX 像素」 設計師最熟悉的尺寸機關，px 是 pixel 的縮寫，即像素，是 抽象的尺寸機關 ，表示位圖中最小的一個像素資訊點，每一個這樣的點隻會有一個色值。 例如 #FFFFFF 白色 或 rgba(255,255,255,0.5) 半透明白 但是這個資訊點到底有多大，則依賴于顯示屏的實體性能。 「PT-iOS研發用」 pt 是 point 的縮寫，點，印刷行業常用機關，等于 1/72 英寸，是 絕對的固定的尺寸機關 。 軟體開發時 iOS 使用 pt 作為尺寸機關，iOS 也是唯一使用絕對尺寸機關的平台，安卓和 H5 都不用 pt。這可能和喬幫主極緻使用者體驗要求有關，各種裝置上看到的東西必須是一樣大，這樣的體驗才一緻。
「DP-安卓研發用(控件)」 Density-independent Pixel 簡稱dp，是 安卓開發用長度機關 ，1dp 表示在160ppi 分辨率螢幕上的 1px。不同裝置螢幕的 ppi 不同，不同裝置上 1dp 代表幾個像素也是不一樣的。ppi後面會說。 下圖是安卓螢幕密度對應表，mdpi、xhdpi 等相當于 iOS 中的@1x、@2x。
160dpi 的裝置使用一倍圖，320dpi 使用二倍圖。這裡說一個 750px 設計圖一稿适配的小坑 ：750的二倍圖上傳到藍湖，iOS端沒問題，但安卓方面藍湖會以 750 作為 xhdpi 的寬，安卓研發按照這個資料做出來的界面會比你的設計圖放大4%。在資訊密集的産品中界面被放大4%足以引發視覺災難。 是以安卓需要手動将尺寸設定為 720，藍湖會按比例等比縮小4%，這樣實作出來的效果才是設計圖表達的效果，設定方式見下圖。
如果你是按安卓标準尺寸出圖，即 360 一倍、720 二倍，那麼 iOS 看圖時同樣需要手動調尺寸，但是不建議用 720 出圖，因為小程式官方規定基于 750 出圖，是以 720 不但不能直接适配 iOS，也不能直接适配小程式。 「SP -安卓研發用(文字)」 Scale-independent Pixel 簡稱sp，是 安卓開發用字号機關 ，安卓系統有單獨調節文字大小的功能，是以字号單獨有機關，在預設情況下，1sp = 1dp，文字放大時 1sp > 1dp。
「REM -H5用(字号)」 rem 是相對于某個根元素的 H5開發用字号機關 ，這個根元素是浏覽器指定的一個字号值，預設情況下是16px。 例如，設計圖中一行文本是24px，使用rem機關代碼應寫為 font-size: 1.5rem 當浏覽器視窗尺寸剛好和設計圖相同時，文字顯示為24px，當浏覽器視窗尺寸縮小50%後，JS腳本會動态更改浏覽器預設字号為16px*50%=8px，此時實際展示字号就變成了1.5rem*8px=12px，由24px降到12px，也随之縮小50%。
「VW/VH -H5用(控件)」 有了相對字号機關就需要有 相對長度機關 ，vw、vh 全稱是 View Width、View Height，即視圖寬度、視圖高度。 vw、vh 是相對于螢幕寬高的相對機關，1vw=螢幕寬度的1%。 vw+vh+rem 這個組合可以被用來寫響應式頁面，不過 vw vh 和 rem 一個是相對于螢幕，一個是相對于根元素，參照物不同，是以這個響應式解決方案大多應用于移動端 H5 開發中，因為移動端浏覽器視窗尺寸和螢幕尺寸基本相同且不可變。 「RPX」 rpx 是 微信小程式專用的相對尺寸機關 ，設計師隻需要按照750出二倍圖即可，研發也隻需要使用微信提供的開發者工具按二倍圖寫代碼，其他适配工作由微信開發者工具自動處理。
「PPI-密度機關」 ppi 表示螢幕上每英寸(對角線)有多少個像素點。同一張位圖的像素資訊是固定的，這張圖的真實視覺尺寸與螢幕的“實體尺寸”和“ppi”兩者都有關系。 假設2台24寸顯示器，一台是老款普通2k顯示器 ppi = 94，另一台是 iMac Retina 4k ppi = 219，那麼100%顯示圖檔時看到的圖像大小會相差一倍多。
現在螢幕 ppi 越來越高，不過不用擔心看的圖像會越來越小。Win 和 Mac 系統早就有整體 UI 縮放方案，讓各種界面保持為使用者習慣的視覺大小。 系統界面縮放方案會使用更多的點(Dot)來渲染像素，比如 Retina 螢幕用4個發光點渲染1個像素資訊，再配以合适的算法補出圖檔中未包含的細節，這張圖在這個高端顯示器上顯示的效果就會超級好。 下圖是 Apple WWDC 2010 喬布斯介紹 Retina 螢幕，“我們有更多的像素，這很重要”。
點圖檔看完整視訊 時長1'34"
「DPI-密度機關」 dpi 中的 d 為 Dot，上面提到過它是螢幕的最小實體發光點，一個最小發光點和一個像素可能不是一一對應關系，Retina 螢幕就是4個 dot 共同 對應1個 pixel。 請看下面兩個清單， 同樣是蘋果裝置，非 Retina 屏和 Retina 屏 dpi 差異巨大。
表格中還有一個叫「dppx 」的機關，也可稱為 dpr，通俗解釋為「每像素邊由多少個 Dot 排列組成」。上表可見分辨率超過1k的 iPhone 基本都是 dppx = 3，即我們熟悉的@3x三倍圖。
所有内容已說完！
H5和安卓因為對應的裝置繁多，是尺寸适配問題重災區，尤其H5開發同學通常比較抵觸使用除px之外的相對機關，一是哪裡要用相對機關，哪裡要用px他不清楚，也沒有問的動力；二是工作量會有一定增加，相應的bug率也會增加；三是H5相對機關或多或少會有相容性問題，要hack這些相容性問題也比較麻煩。 但是通過上面的内容我們已經了解到隻用 px 這個機關寫前端的話會受到各種影響導緻最終呈現效果不理想。設計開發互相了解吧，都不容易，發現問題甩鍋沒有意義，還是要和開發同學一起把實作品質搞上去。