pxtorem

package.json

@@ -79,6 +79,7 @@
     "@tauri-apps/cli": "2.0.0-alpha.20",
     "@types/better-sqlite3": "^7.6.5",
     "@types/node": "^18.7.10",
+    "@types/postcss-pxtorem": "^6.0.3",
     "@unocss/preset-icons": "^0.56.5",
     "@unocss/reset": "^0.57.1",
     "@unocss/transformer-directives": "^0.56.5",
@@ -94,6 +95,8 @@
     "internal-ip": "^7.0.0",
     "istanbul-badges-readme": "^1.8.5",
     "lint-staged": "^13.2.1",
+    "postcss-calc": "^9.0.1",
+    "postcss-pxtorem": "^6.0.0",
     "prisma": "^5.3.1",
     "prisma-kysely": "^1.7.0",
     "rimraf": "^5.0.1",

src/styles/index.scss

@@ -10,6 +10,10 @@
 html, body {
   overflow: hidden;
   --un-default-border-color: #000000;
+  font-size: 3.75vw;
+  @media (min-width: 640px) {
+    font-size: 16PX;
+  }
 }
 
 ::-webkit-scrollbar {

tsconfig.node.json

@@ -3,6 +3,7 @@
     "composite": true,
     "module": "ESNext",
     "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
     "strict": true
   },
   "include": ["vite.config.ts", "plugins"]

vite.config.ts

@@ -13,6 +13,8 @@ import { visualizer } from 'rollup-plugin-visualizer'
 import { defineConfig } from 'vitest/config'
 import transformerDirectives from '@unocss/transformer-directives'
 import vuetify from 'vite-plugin-vuetify'
+import postCssPxToRem from 'postcss-pxtorem'
+import postCssCalc from 'postcss-calc'
 import { internalIpV4 } from 'internal-ip'
 
 const mobile = !!/android|ios/.exec(process.env.TAURI_ENV_PLATFORM || '')
@@ -84,4 +86,15 @@ export default defineConfig({
       reporter: ['html-spa', 'json-summary'],
     },
   },
+  css: {
+    postcss: {
+      plugins: [
+        postCssPxToRem({
+          rootValue: 16,
+          propList: ['*', '!--v-*'],
+        }),
+        postCssCalc({}),
+      ],
+    },
+  },
 })