- px 固定的單位，不會進行自適應。
- rem r = root font-size=16px 1rem=16px，但是需要手動進行單位的換算
- vw vh 相對于視口的尺寸，不同于百分比（相對于父元素的尺寸）375屏幕 1vw = 3.75px
利用插件進行 px（設計稿）=> viewport。
vite 內置了 PostCss 。
Declaration(node) {console.log(node.prop,node.value)
},
具體實現
- 清除默認樣式
<!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"/><title>Vite + Vue + TS</title><style>* {padding: 0;margin: 0;}html, body, #app {height: 100%;overflow: hidden;}</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>- 寫個圣杯布局（三欄布局）
<template><header><div class="left">left</div><div class="center">center</div><div class="right">right</div></header>
</template><script setup lang="ts"></script><style scoped lang="less">
header {display: flex;.left {width: 100px;height: 50px;background: lightblue;}.center {flex: 1;height: 50px;background: lightcoral;}.right {width: 100px;height: 50px;background: lightgoldenrodyellow;}
}
</style>
- 忽略一些不必要的報錯
tsconfig.node.json
{"compilerOptions": {"composite": true,"skipLibCheck": true,"module": "ESNext","moduleResolution": "bundler","allowSyntheticDefaultImports": true,"noImplicitAny": false},"include": ["vite.config.*","plugins/**/*"]
}- 編寫插件
// vite 內置了 postcss 插件，無需安裝
import {Plugin} from "postcss";const Options = {viewPortWidth: 375 // UI設計稿的寬度，給多少寫多少
}interface Options {viewPortWidth: number
}export const PostcssPxToViewport = (options: Options = Options): Plugin => {const opt = Object.assign({}, Options, options)return {postcssPlugin: 'postcss-px-to-viewport',Declaration(node) {// 這里的px可以寫成自定義任意單位，保證只有部分單位需要轉換if (node.value.includes('px')) {const num = parseFloat(node.value)node.value = `${((num / opt.viewPortWidth) * 100).toFixed(2)}vw`}},}
}- vite配置
vite.config.ts
export default defineConfig({plugins: [vue()],// 通過配置變為全局通用樣式css: {preprocessorOptions: {scss: {additionalData: '@import "./src/bem.scss";',},},postcss: {plugins: [PostcssPxToViewport()]}}
})
)
