微信小程式----解析px、rpx、rem、vw實現頁面佈局
阿新 • • 發佈：2018-12-23
PX
px：絕對單位，頁面按精確畫素展示。
在PC端經常使用的單位，不用計算，直接使用，一般情況不用考慮設計圖紙的來改變頁面的大小。就直接採用px,方便快捷但是不能自適應。
RPX
rpx單位是微信小程式中css的尺寸單位，rpx可以根據螢幕寬度進行自適應。
微信的自適應單位，同時微信規定：螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px。
| 裝置 | rpx換算px (螢幕寬度/750) | px換算rpx (750/螢幕寬度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2.00rpx |
| iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
REM
rem：相對單位，可理解為”root em”, 相對根節點html的字型大小來計算。
微信小程式的rem尺寸單位，rem和rpx的換算關係：rem: 規定螢幕寬度為20rem；1rem = (750/20)rpx =37.5rpx;
VW
vw、vh、vmin、vmax 主要用於頁面視口大小布局，相對於rem;vw在頁面佈局上更加方便簡單。
相對於視口的寬度。視口被均分為100單位的vw。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則1vw = 7.5px。不用關注是在什麼螢幕下，只用關注設計圖紙的寬度。假如：在750px的設計圖紙，一個字型是30px,那麼font-size: calc(30/7.5)vw，也就是font-size: 4vw。簡單快捷，微信小程式支援，同時自適應很強。
VW上線例項小程式
- 觀閤中醫
總結
經過個人的開發實踐經驗，個人推薦使用VW單位解決微信小程式的適配方案，開發快捷、簡單、易懂。所以推薦使用VW作為微信小程式的適配單位。
其他
QQ交流群：264303060