rpx和px混用方案

大袤宏图2025-02-14 11:26

（1）创建一个全局的样式配置文件：

css 复制代码

// styles/variables.scss
:root {
  // 基础字体大小
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  
  // 响应式间距
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
}

// 在小屏设备上使用rpx
@media screen and (max-width: 768px) {
  :root {
    --font-size-xs: 24rpx;
    --font-size-sm: 28rpx;
    --font-size-md: 32rpx;
    --font-size-lg: 36rpx;
    
    --spacing-xs: 10rpx;
    --spacing-sm: 20rpx;
    --spacing-md: 30rpx;
    --spacing-lg: 40rpx;
  }
}

（2）使用

css 复制代码

<template>
  <view class="container">
    <text class="title">标题</text>
    <text class="content">内容</text>
  </view>
</template>

<style scoped>
.title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

.content {
  font-size: var(--font-size-md);
}
</style>

（3）方案优点

i. 提供了统一的样式管理

ii. 易于维护和修改

iii. 可以根据不同设备自动适配

iv. 保持了代码的清晰和可读性

（4）注意事项

i. 在项目入口文件引入全局样式配置

ii. 根据实际设计规范调整具体的尺寸值

iii. 可以根据需要添加更多的断点和变量

iv. 考虑添加更多的设备类型判断（如平板、桌面等）

（5）为什么在小设备上使用rpx，在宽设备上使用px？

这是因为 rpx 和 px 在不同设备上的表现特点不同：

i. rpx 的特点： rpx 是微信小程序引入的响应式单位, 规则是屏幕宽度/750，即以 750rpx为基准，在小屏手机上表现良好，因为大多数手机的设计稿都是以750px 为基准，但在大屏设备上会等比放大，导致内容过大。

ii. px的特点：