长度单位 のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• +uniapp+长度单位 へ行く。
  • 1 (2022-12-17 (土) 11:15:59)

uni-app

※前提条件：vue3 的uniapp开发

 XXX

em †[edit]

相对长度单位。

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem(root em) †[edit]

默认根字体大小为 屏幕宽度/20（微信小程序、头条小程序、App、H5）

vh(viewpoint height) †[edit]

视窗高度，1vh等于视窗高度的1%

vh(viewpoint height) †[edit]

视窗高度，1vh等于视窗高度的1%

px(Pixel) †[edit]

屏幕像素

rpx †[edit]

响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。

微信小程序设计了 rpx 解决这个问题，uni-app 在 App 端、H5 端都支持了 rpx。

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明：

• 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
• 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
• 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。

Comment：

お名前:

(画像の文字列を入力して下さい)