This commit is contained in:
牛子源 2025-05-15 11:56:51 +08:00
parent 5ccb88f4fc
commit 781dc34f50
5 changed files with 119 additions and 3 deletions

82
package-lock.json generated
View File

@ -20,7 +20,10 @@
"@types/node": "^22.14.0",
"@vitejs/plugin-vue": "^5.2.3",
"@vue/tsconfig": "^0.7.0",
"autoprefixer": "^10.4.21",
"npm-run-all2": "^7.0.2",
"postcss": "^8.5.3",
"postcss-pxtorem": "^6.1.0",
"sass": "^1.86.3",
"typescript": "~5.8.0",
"vite": "^6.2.4",
@ -2154,6 +2157,44 @@
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/autoprefixer": {
"version": "10.4.21",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"browserslist": "^4.24.4",
"caniuse-lite": "^1.0.30001702",
"fraction.js": "^4.3.7",
"normalize-range": "^0.1.2",
"picocolors": "^1.1.1",
"postcss-value-parser": "^4.2.0"
},
"bin": {
"autoprefixer": "bin/autoprefixer"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"peerDependencies": {
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "1.8.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
@ -2758,6 +2799,20 @@
"node": ">= 6"
}
},
"node_modules/fraction.js": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
"dev": true,
"license": "MIT",
"engines": {
"node": "*"
},
"funding": {
"type": "patreon",
"url": "https://github.com/sponsors/rawify"
}
},
"node_modules/fs-extra": {
"version": "11.3.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
@ -3368,6 +3423,16 @@
"dev": true,
"license": "MIT"
},
"node_modules/normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/normalize-wheel-es": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
@ -3584,6 +3649,23 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/postcss-pxtorem": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
"integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"postcss": "^8.0.0"
}
},
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true,
"license": "MIT"
},
"node_modules/pretty-ms": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.2.0.tgz",

View File

@ -23,7 +23,10 @@
"@types/node": "^22.14.0",
"@vitejs/plugin-vue": "^5.2.3",
"@vue/tsconfig": "^0.7.0",
"autoprefixer": "^10.4.21",
"npm-run-all2": "^7.0.2",
"postcss": "^8.5.3",
"postcss-pxtorem": "^6.1.0",
"sass": "^1.86.3",
"typescript": "~5.8.0",
"vite": "^6.2.4",

11
postcss.config.js Normal file
View File

@ -0,0 +1,11 @@
export default {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 根元素字体大小,或根据设计稿来设置
propList: ['*'], // 可以从px更改为rem的属性
selectorBlackList: ['html', '.no-rem', '.ignore-rem'], // 要忽略的选择器
minPixelValue: 2 // 设置要替换的最小像素值
},
autoprefixer: {}
}
}

View File

@ -14,16 +14,33 @@ ul, li {
outline: none!important;
}
html, body {
body {
height: 100%;
font-family: PingFangSC, PingFang SC, sans-serif;
font-size: 16px;
color: base.$text-primary;
background-color: base.$background-color-base;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html{
font-size: 16px;
}
@media screen and (max-width: 1920px) {
html {
font-size: 16px; // 适配 1920px 宽度的标准稿
}
}
@media screen and (max-width: 1600px) {
html {
font-size: 14px; // 更小的字体以适配较小屏幕
}
}
@media screen and (max-width: 1440px) {
html {
font-size: 12px; // 更小的字体以适配较小屏幕
}
}
#app {
height: 100vh;
width: 100vw;

View File

@ -10,6 +10,9 @@ export default defineConfig({
vue(),
vueDevTools(),
],
css: {
postcss: './postcss.config.js' // 指向你的PostCSS配置文件
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))