vue 使用postcss-pxtorem 实现适老化
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>实现原理说明
-
rem 转换机制：
postcss-pxtorem 自动将 px 转换为 rem
基准值通过 JS 动态设置（16px/20px）
-
一键切换功能：
使用 Vue 响应式状态管理
切换时更新根字体大小（document.documentElement.style.fontSize）
添加 elder-mode 类名应用额外样式
-
持久化存储：
使用 localStorage 保存用户选择
页面刷新后自动恢复状态
-
适老模式增强：
增大字体（16px → 20px）
增加行高（1.5 → 1.8）
增强对比度
增大点击区域
-
特殊处理：
使用 .no-rem 类名或 Px 单位跳过转换
媒体查询中的 px 不会转换