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 不會轉換