diff --git a/package.json b/package.json
index 6e79a96..f8bc935 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@iconify/json": "^2.2.95",
     "@iconify/vue": "^4.1.1",
+    "@unocss/preset-rem-to-px": "^0.54.1",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/compiler-sfc": "^3.3.4",
     "@zclzone/eslint-config": "^0.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cf93fac..8dac917 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -61,6 +61,9 @@ devDependencies:
   '@iconify/vue':
     specifier: ^4.1.1
     version: 4.1.1(vue@3.3.4)
+  '@unocss/preset-rem-to-px':
+    specifier: ^0.54.1
+    version: 0.54.1
   '@vitejs/plugin-vue':
     specifier: ^4.2.3
     version: 4.2.3(vite@4.4.7)(vue@3.3.4)
@@ -1597,6 +1600,10 @@ packages:
   /@unocss/core@0.53.6:
     resolution: {integrity: sha512-wuaLjWCzKUisHUxo4pjIdzcimdSmVa2hMHA3V7wVFBiSFX96/s7l0bvhHGFF/gMjbOnvJ+y+lBl3VKqcj9kwbA==}
 
+  /@unocss/core@0.54.1:
+    resolution: {integrity: sha512-lbwvGD91liMNEZs3jwXxLrIHIn/J4dkJpeKdosRdm1xObqrkg0+Zx1fVn6X+GOX74yvjQlzbu/ODZEXFQC3mGw==}
+    dev: true
+
   /@unocss/eslint-config@0.53.6(eslint@8.45.0)(typescript@5.1.6):
     resolution: {integrity: sha512-shS4CV/TcyCqYsj/uk2uxohVNkm9qojuafej889KmiTySosIN+WDcyP0zhAX5vLHIeLbPJUbYCTrdu1TIXhsTA==}
     engines: {node: '>=14'}
@@ -1673,6 +1680,12 @@ packages:
       '@unocss/extractor-arbitrary-variants': 0.53.6
     dev: true
 
+  /@unocss/preset-rem-to-px@0.54.1:
+    resolution: {integrity: sha512-kdKPV0AfY/cNKTD7lcDn3GJL02/uXArYe8zD6zc4mweBTlbK8bWfn66ceRK3iNmNCuUuWMttIKv2Qxe6eZwEhg==}
+    dependencies:
+      '@unocss/core': 0.54.1
+    dev: true
+
   /@unocss/preset-tagify@0.53.6:
     resolution: {integrity: sha512-RZUvXIaxJviu7CCbGIaizT08exMSaoCcmhLEotrY1vLcmgne6q6IMK9m4hCFlFuaidrFxPqLd1FjsDTSaNWQvw==}
     dependencies:
diff --git a/unocss.config.js b/unocss.config.js
index 894157d..63e65e8 100644
--- a/unocss.config.js
+++ b/unocss.config.js
@@ -1,4 +1,5 @@
 import { defineConfig, presetAttributify, presetUno } from 'unocss'
+import presetRemToPx from '@unocss/preset-rem-to-px'
 
 export default defineConfig({
   content: {
@@ -6,7 +7,7 @@ export default defineConfig({
       include: [/\.(vue|svelte|[jt]sx|mdx?|html)($|\?)/],
     },
   },
-  presets: [presetUno(), presetAttributify()],
+  presets: [presetUno(), presetAttributify(), presetRemToPx({ baseFontSize: 4 })],
   shortcuts: [
     ['wh-full', 'w-full h-full'],
     ['f-c-c', 'flex justify-center items-center'],