【小程序】使用uni-app搭建小程序環境---尺寸單位

尺寸單位

uni-app 支持的通用 css 單位包括 px、rpx

• px 即屏幕像素
• rpx 即響應式px，一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基准，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大。

 

vue頁面支持普通H5單位，但在nvue里不支持：

• rem 默認根字體大小為 屏幕寬度/20（微信小程序、頭條小程序、App、H5）
• vh viewpoint height，視窗高度，1vh等於視窗高度的1%
• vw viewpoint width，視窗寬度，1vw等於視窗寬度的1%

 

rpx 詳細說明：

• 微信小程序設計了 rpx 解決這個問題，uni-app 在 App 端、H5 端都支持了 rpx。
• rpx 是相對於基准寬度的單位，可以根據屏幕寬度進行自適應。
• uni-app 規定屏幕基准寬度 750rpx。
• 開發者可以通過設計稿基准寬度計算頁面元素 rpx 值，設計稿 1px 與框架樣式 1rpx 轉換公式如下：　
  設計稿 1px / 設計稿基准寬度 = 框架樣式 1rpx / 750rpx　
  

  換言之，頁面元素寬度在 uni-app 中的寬度計算公式：

  750 * 元素在設計稿中的寬度 / 設計稿基准寬度

•  

  舉例說明：

  1. 若設計稿寬度為 750px，元素 A 在設計稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應該設為：750 * 100 / 750，結果為：100rpx。
  2. 若設計稿寬度為 640px，元素 A 在設計稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應該設為：750 * 100 / 640，結果為：117rpx。
  3. 若設計稿寬度為 375px，元素 B 在設計稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應該設為：750 * 200 / 375，結果為：400rpx。

Tips

• 注意 rpx 是和寬度相關的單位，屏幕越寬，該值實際像素越大。如不想根據屏幕寬度縮放，則應該使用 px 單位。
• 如果開發者在字體或高度中也使用了 rpx ，那么需注意這樣的寫法意味着隨着屏幕變寬，字體會變大、高度會變大。如果你需要固定高度，則應該使用 px 。
• rpx不支持動態橫豎屏切換計算，使用rpx建議鎖定屏幕方向
• 設計師可以用 iPhone6 作為視覺稿的標准。
• 如果設計稿不是750px，HBuilderX提供了自動換算的工具，詳見：https://ask.dcloud.net.cn/article/35445。
• App端，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位，只支持 px，不支持 rpx。
• 早期 uni-app 提供了 upx ，目前已經推薦統一改為 rpx 了，詳見