微信小程序 iphone6 和 iphone6plus 如何設置rpx單位,通俗易懂的方法


clipboard.png

pt:屏幕物理像素(屏幕實際寬度像素) px:屏幕分辨率 pt和px關系:iphone6plus
ppi密度高,1pt里有3px,iphone6 1pt里有2px。

iphone6寬度 (物理像素) :375pt,1pt含有2px, 分辨率(設計圖) 750px。
iphone6plus寬度(物理像素):414pt,1pt含有3px,分辨率(設計圖)1252px。

rpx換算

換算公式:750/屏幕實際寬度(pt)

iphone6plus(@3x) px換算rpx:

750/414=1.8115942028985508rpx
在設計圖中,設計圖大小為1252px;
如果一個寬度為30px換算rpx:
30/3*1.8115942028985508=8.115942028985508;
所以在微信小程序中,直接填寫8.115942028985508rpx即可。

iphone6(@2x) px換算 rpx:
750/375=2rpx;
在設計圖中,設計圖大小為750px;
如果一個寬度為30px換算rpx:
30/2*2=30rpx
所以在微信小程序中,直接填寫30rpx即可。

rpx是在不同屏幕下可以適配的,所以使用rpx單位只要在一種設計圖下適配,都可以在不同設備大小自己調節大小
通過以上例子看出做小程序時,需要設計圖為以iphone6手機大小設計方案最佳!!

本文轉載於:猿2048https://www.mk2048.com/blog/blog.php?id=hjb1ji2h1ib


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM