diff --git a/index.html b/index.html
index dde16aa..6e5eb8b 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,13 @@
-
-
-
-
+
+
+
+
Vite + Vue + TS
-
-
-
-
-
+
+
+
+
+
diff --git a/package.json b/package.json
index 0dfe768..f21822a 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 0000000..6362885
--- /dev/null
+++ b/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/]
+ }
+ }
+}
diff --git a/src/main.ts b/src/main.ts
index 2425c0f..4a2541f 100644
--- a/src/main.ts
+++ b/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')
diff --git a/src/styles/reset.css b/src/styles/reset.css
new file mode 100644
index 0000000..3776bab
--- /dev/null
+++ b/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;
+}
\ No newline at end of file