我們知道小程序 css 有個rpx
單位,它是默認屏幕寬度是750rpx,不區分屏幕分辨率
如何從設計稿的px
轉爲rpx
,計算方法是:
css目標容器高度(rpx) = 設計稿目標容器高度/ (設計稿寬度/750)
css目標容器寬度(rpx) = 設計稿目標容器寬度/ (設計稿寬度/750)
提示:
這裏的設計稿寬度是指設計稿本身基準寬度,比如常見的375、1080;
同理:
普通 html 中基準寬度是 100vw
,那麼
css目標容器高度(vw) = 設計稿目標容器高度/ (設計稿寬度/100)
css目標容器寬度(vw) = 設計稿目標容器寬度/ (設計稿寬度/100)
字體也可以這樣計算,單位都是vw
,這裏的vw
效果跟小程序的rpx
效果一樣,都是動態變化的,自適應屏幕大小