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