在 Vue 3 + Vite 项目中使用 Less 实现自适应布局：VW 和 VH 的应用

fxshy2025-11-07 21:53

1. less的计算代码

css 复制代码

@charset "utf-8";
 
// 默认设计稿的宽度(根据开发UI稿更改)
@designWidth: 1920;

// 默认设计稿的高度(根据开发UI稿更改)
@designHeight: 1080;

.vw(@name, @px) {
      @{name}: (@px / @designWidth) * 100vw;
}

.vh(@name, @px) {
      @{name}: (@px / @designHeight) * 100vh;
}

.font(@px) {
      font-size: (@px / @designWidth) * 100vw;
}

2. vite.config.js里面的配置

javascript 复制代码

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const { VITE_WEB_BASE_URL, VITE_WEB_PROXY_TARGET } = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [
      vue(),
    ],
    css: {
      preprocessorOptions:{
        less:{
          additionalData:`@import "@/styles/utils.less";` //less工具函数的目录文件 一定要加分号
        }
      }
    },
    // 别名配置
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      }
    },
  }
})

3. 使用

css 复制代码

.header-icon {
  .vw(width, 16);
  .vh(height, 18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-title {
  width: 100%;
  color: #ffffff;
  .font(18);
  font-weight: 400;
  font-family: "SourceHanSansCN";
}