微信小程式-尺寸單位rpx
阿新 • • 發佈：2019-02-17
rpx單位是微信小程式中css的尺寸單位，rpx可以根據螢幕寬度進行自適應。
Iphone裝置相關引數
| 裝置 | 螢幕尺寸 | 解析度(PT) | Reader | 解析度(px) | 渲染後 | PPI(DPI) |
|---|---|---|---|---|---|---|
| iPhone 3GS | 3.5寸 | 320*480 | @1x | 320*480 | 空 | 163 |
| iPhone 4/4S | 3.5寸 | 320*480 | @2x | 640*960 | 空 | 326 |
| iPhone 5/5S/5C | 4.0寸 | 320*568 | @2x | 640*1136 | 空 | 326 |
| iPhone 6/6S | 4.7寸 | 375*667 | @2x | 750*1334 | 空 | 326 |
| iPhone 6P | 5.5寸 | 414*736 | @3x | 1242*2208 | 1080*1920 | 401 |
- pt:邏輯解析度； pt的大小與螢幕的尺寸有關係，簡單可以理解為長度和視覺單位
- px指物理解析度,和螢幕尺寸沒關係
pt和px關係
- 1個pt可以有1個px構成，也可以有2個px,還可以有3個甚至更多
- iphone6是由2個px構成的
如何做不同解析度裝置的自適應
- 以iphone6的物理畫素750*1334為視覺稿進行設計，而在小程式中使用rpx為單位
- iphone6下 1px = 1rpx = 0.5pt
- 使用rpx小程式會在不同解析度的裝置下自動進行轉換，而px不會
建議設計團隊按iphone6來做設計圖,因為
Iphone6 1px=1rpx
Iphone6 plus 1px=0.6rpx
Iphone6換算比較方便。
不是所有的單位都適合rpx，字型不適合rpx,會導致不同裝置看不清