From 4c8f9b53aa56bdc68feaf51e51e14b0734cc697a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?mac=C2=B7ufutx?= Date: Mon, 9 Jun 2025 18:50:07 +0800 Subject: [PATCH] =?UTF-8?q?20250609=20px=E8=BD=ACvw=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 18 +++++++++--------- package.json | 4 +++- postcss.config.cjs | 45 ++++++++++++++++++++++++++++++++++++++++++++ src/main.ts | 1 + src/styles/reset.css | 34 +++++++++++++++++++++++++++++++++ 5 files changed, 92 insertions(+), 10 deletions(-) create mode 100644 postcss.config.cjs create mode 100644 src/styles/reset.css 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