20250609 px转vw版本

2025-06-09 18:50:07 +08:00 · 2025-06-09 18:50:07 +08:00 · 4c8f9b53aa
commit 4c8f9b53aa
parent 59521e4df4
5 changed files with 92 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite + Vue + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
--- 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"
  }
 }
--- a/postcss.config.cjs
+++ 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/]
+    }
+  }
+}
--- 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')
--- a/src/styles/reset.css
+++ 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;
+}