1. 安装依赖

npm install postcss-pxtorem -D

2. 配置 Vite (vite.config.js)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcsspxtorem from 'postcss-pxtorem'export default defineConfig({plugins: [vue()],css: {postcss: {plugins: [postcsspxtorem({rootValue: 16, // 基准值propList: ['*'], // 转换所有属性selectorBlackList: ['no-rem'], // 忽略的类名前缀exclude: /node_modules/i // 排除 node_modules})]}}
})

3. 创建全局状态管理 (src/stores/elderMode.js)

// src/stores/elderMode.ts
import { defineStore } from 'pinia';
export default defineStore('elderMode', () => {// 从 localStorage 读取初始状态const isElderMode = ref(localStorage.getItem('elderMode') === 'true');// 监听状态变化并更新根字体大小watchEffect(() => {const fontSize = isElderMode.value ? 20 : 16;document.documentElement.style.fontSize = `${fontSize}px`;// 添加/移除适老模式类名if (isElderMode.value) {document.body.classList.add('elder-mode');} else {document.body.classList.remove('elder-mode');}localStorage.setItem('elderMode', isElderMode.value.toString());});// 切换功能const toggleElderMode = () => {isElderMode.value = !isElderMode.value;};return {isElderMode,toggleElderMode,};
});

4. 创建切换按钮组件 (src/components/ElderToggle.vue)

<template><buttonclass="elder-toggle":class="{ active: $elderMode.isElderMode }"@click="toggleElderMode"aria-label="适老模式切换"><span class="icon">A+</span></button>
</template><script setup lang="ts">
import elderMode from '@/stores/elderMode';
const $elderMode = elderMode();function toggleElderMode() {$elderMode.toggleElderMode();
}
</script><style scoped>
.elder-toggle {position: fixed;bottom: 20px;right: 20px;z-index: 1000;width: 50px;height: 50px;border-radius: 50%;background: #409eff;color: white;border: none;cursor: pointer;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);transition: all 0.3s;
}.elder-toggle.active {background: #ff6a00;transform: scale(1.1);
}.icon {font-size: 18px;font-weight: bold;
}
</style>

5. app中使用

<template><router-view></router-view><ElderToggle />
</template>
<script setup lang="ts">onMounted(() => {});
</script>

实现原理说明

1. rem 转换机制：

   postcss-pxtorem 自动将 px 转换为 rem

   基准值通过 JS 动态设置（16px/20px）

2. 一键切换功能：

   使用 Vue 响应式状态管理

   切换时更新根字体大小（document.documentElement.style.fontSize）

   添加 elder-mode 类名应用额外样式

3. 持久化存储：

   使用 localStorage 保存用户选择

   页面刷新后自动恢复状态

4. 适老模式增强：

   增大字体（16px → 20px）

   增加行高（1.5 → 1.8）

   增强对比度

   增大点击区域

5. 特殊处理：

   使用 .no-rem 类名或 Px 单位跳过转换

   媒体查询中的 px 不会转换