rpx和px混用方案

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

// 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）使用

<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的特点：
px是固定单位，不会随屏幕变化，在大屏设备上能保持合适的尺寸，但在小屏设备上可能显示过小