uniapp支持rpx

### UniApp 对 rpx 单位的支持

UniApp 完全支持 `rpx` 这一响应式像素单位[^1]。作为一种根据屏幕宽度自动调整大小的动态单位，`rpx` 能够帮助开发者轻松实现跨平台应用在不同分辨率下的良好显示效果。

#### 使用场景与限制

尽管大多数情况下都可以使用 `rpx` 来定义界面元素尺寸，但在某些特定情境下仍需注意：

- **通用支持**：对于 App 端、H5 端以及微信小程序等环境而言，`rpx` 是被广泛接受并推荐使用的尺寸单位。

- **例外情况**：然而，在涉及到 `pages.json` 文件中的 `titleNView` 配置项或是通过 Plus API 编写的内容时，则仅能采用固定数值形式表达长度——此时应选用传统的 `px` 作为度量标准[^2]。

#### 如何利用 rpx 实现灵活布局

为了更好地理解和运用这一特性，下面给出一段简单的代码片段来展示如何基于 `rpx` 构建页面结构：

<template>
  <view class="container">
    <!-- 头部导航栏 -->
    <navigator url="/pages/index/index" open-type="switchTab"
      ><text>首页</text></navigator>

    <!-- 主体内容区 -->
    <scroll-view scroll-y style="height: calc(100vh - var(--status-bar-height)); padding-top: 88rpx;">
      <block v-for="(item, index) in listData" :key="index">
        <view>{{ item }}</view>
      </block>
    </scroll-view>
    
    <!-- 底部菜单 -->
    <footer class="bottom-menu">底部链接</footer>
  </view>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;

  .bottom-menu {
    height: 96rpx; /* 设置高度 */
    line-height: 96rpx; /* 垂直居中文本 */
    text-align: center;
    background-color: #f7f7f7;
  }
}
</style>

此示例展示了如何借助 `rpx` 创建一个具有顶部导航条、滚动列表主体及底部固定的工具栏样式的单页应用程序界面。值得注意的是，这里还引入了一个变量 `--status-bar-height` ，用于处理状态栏的高度差异问题；同时采用了 CSS 的 `calc()` 函数配合视口单位 (`vh`) 和相对定位技术(`padding-top`)共同作用于容器内部间距上，从而确保整体布局的一致性和美观性。

另外，当需要获取当前设备的实际物理像素宽高比或执行其他更复杂的操作时，可以通过调用内置方法如 `uni.getSystemInfoSync()` 获取到必要的参数信息，并据此计算出合适的缩放因子应用于后续逻辑运算之中[^4]。