如何在普通Html中實現類似小程序中的 rpx 動態單位自適應效果

我們知道小程序 css 有個rpx單位,它是默認屏幕寬度是750rpx,不區分屏幕分辨率

如何從設計稿的px轉爲rpx,計算方法是:
css目標容器高度(rpx) = 設計稿目標容器高度/ (設計稿寬度/750)
css目標容器寬度(rpx) = 設計稿目標容器寬度/ (設計稿寬度/750)

提示:
這裏的設計稿寬度是指設計稿本身基準寬度,比如常見的375、1080;

同理:
普通 html 中基準寬度是 100vw,那麼
css目標容器高度(vw) = 設計稿目標容器高度/ (設計稿寬度/100)
css目標容器寬度(vw) = 設計稿目標容器寬度/ (設計稿寬度/100)

字體也可以這樣計算,單位都是vw,這裏的vw效果跟小程序的rpx效果一樣,都是動態變化的,自適應屏幕大小

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章