1. 程式人生 > >初嘗微信小程序3-移動設備的分辨率與rpx

初嘗微信小程序3-移動設備的分辨率與rpx

一個 尺寸 info span 有關 移動 微信小程序 更改 cor

技術分享圖片

屏幕尺寸就是實際的物理尺寸。

分辨率(pt),是邏輯分辨率,pt的大小只和屏幕尺寸有關,簡單可以理解為長度和視覺單位。

分辨率(px),是物理分辨率,單位是像素點,和屏幕尺寸沒有關系。

微信開發者工具上iphone6尺寸是375,指的是邏輯分辨率,設計圖常常給出的750px是物理分辨率。1個pt可以有1個px構成,也可以是2個,還可以有3個甚至更多(其實@2x已經是人眼的極限了,再增加也不會改變清晰度)。如果是以iphone6的尺寸開發的話,那麽設計圖給的物理像素除以2,才是寫在代碼裏的邏輯分辨率。這樣很麻煩,針對不同的機型,添加圖片需要更改各自的寬高。

所以需要做到不同分辨率設備的自適應

以iphone6的物理像素750X1334為視覺稿進行設計,而在小程序中使用rpx為單位,1px=1rpx=0.5pt。使用rpx,小程序會自動在不同的分辨率下進行轉換,而使用px為單位不會。

rpx在微信小程序中,相當於一個標準,在不同的分辨率機型下,代表不同的實際長度。

所以今後在設計頁面布局圖的時候,盡量以iphone6,750px屏幕尺寸為標準設計,這樣比較方便,不會有太大問題。(如果以iPhone6 plus為標準設計的話,1px = 0.6rpx,換算很麻煩,而iPhone6 1px=1rpx,很方便,1:1)。

PS:不是所有的單位都適合用rpx

比如一些文字,如果用rpx自適應,那可能在小機型上,字會很小看不清。

初嘗微信小程序3-移動設備的分辨率與rpx