20250609 px转vw版本

package.json

@@ -22,6 +22,7 @@
     "@vueuse/core": "^13.3.0",
     "axios": "^1.9.0",
     "pinia": "^2.1.7",
+    "postcss-px-to-viewport": "^1.1.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
   },
@@ -42,10 +43,11 @@
     "less-loader": "^12.3.0",
     "lint-staged": "^16.1.0",
     "postcss": "^8.4.24",
+    "postcss-px-to-viewport-8-plugin": "^1.2.5",
     "prettier": "^3.5.3",
     "typescript": "5.1.6",
     "vite": "^4.4.9",
     "vite-plugin-image-optimizer": "^1.1.8",
-    "vue-tsc": "^2.2.8"
+    "vue-tsc": "^2.2.10"
   }
 }

postcss.config.cjs

@@ -0,0 +1,45 @@
+// postcss.config.cjs
+/*
+使用方式：
+正常启用（默认）：npm run dev
+临时禁用：ENABLE_PX_TO_VW=false npm run dev
+ */
+// const isPxToVwEnabled = process.env.ENABLE_PX_TO_VW !== 'false'
+// module.exports = {
+//   plugins: {
+//     ...(isPxToVwEnabled && {
+//       'postcss-px-to-viewport': {
+//         unitToConvert: 'px', // 需要转换的单位，默认为"px"
+//         viewportWidth: 750, // 设计稿的视口宽度（如常见的750px）
+//         unitPrecision: 5, // 转换后的精度，即小数点位数
+//         propList: ['*'], // 匹配的属性列表，'*'表示全部属性
+//         viewportUnit: 'vw', // 转换后的视口单位
+//         fontViewportUnit: 'vw', // 字体使用的视口单位
+//         selectorBlackList: [], // 需要忽略的选择器
+//         minPixelValue: 1, // 最小的转换数值
+//         mediaQuery: false, // 是否在媒体查询中也进行转换
+//         replace: true, // 是否直接替换而不添加备用属性
+//         exclude: [/node_modules/], // 忽略的文件路径
+//         include: undefined, // 如果设置了include，只有匹配到的文件才会被转换
+//         landscape: false // 是否添加横向的媒体查询
+//       }
+//     })
+//   }
+// }
+
+// postcss.config.cjs
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport-8-plugin': {
+      unitToConvert: 'px',
+      viewportWidth: 750,
+      unitPrecision: 5,
+      viewportUnit: 'vw',
+      fontViewportUnit: 'vw',
+      selectorBlackList: [],
+      minPixelValue: 1,
+      mediaQuery: false,
+      exclude: [/node_modules/]
+    }
+  }
+}

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import './styles/reset.css' // 引入重置样式
 
 createApp(App).mount('#app')

src/styles/reset.css

@@ -0,0 +1,34 @@
+/* 基础样式重置 */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    /* 防止字体大小在横竖屏切换时变化 */
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    line-height: 1.5;
+    color: #333;
+    background-color: #fff;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}