1. 程式人生 > >微信小程式中rpx與rem,px單位的轉換使用

微信小程式中rpx與rem,px單位的轉換使用

原作者: 小小小 來自: 授權地址

一、rem的使用
1) 根據設計稿寬度算出rem和px直接的轉換公式

這裡寫圖片描述

1rem = 20 x 640/320 + ‘px’ = 40px;
1rem=20*750/320+‘px’=46.875px;

二、rpx的使用
1)小程式中rpx與px的轉換

例如:設計稿750px寬度
那麼恭喜您,你ps上量出寬度是多少,那麼你就定義多少rpx,也就是 1px = 1rpx
例如:設計稿640px寬度
那麼很遺憾,你需要轉換一下 1px = 750/640 rpx=1.171875rpx;

這裡寫圖片描述

2)小程式中如何繼續使用rem

例如:設計稿750px寬度
此時1rem = (750/20)rpx = 37.5px

例如:設計稿640px寬度
此時1rem = (750/20)rpx = 32px

2)小程式中如何繼續使用rem

例如:設計稿750px寬度
此時1rem = (750/20)rpx = 37.5px

例如:設計稿640px寬度
此時1rem = (750/20)rpx = 32px