less+vw+vh实现可视化大屏适配

1. 安装less和less-loader

npm install -D less less-loader

2. 封装less工具函数 实现px转vw、vh；创建utils.less文件

	@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;
	}

3.1 在vue.config.js配置less预处理器文件(2中的utils.less文件)

module.exports = defineConfig({
  css: {
    loaderOptions: {
      	less: {
        	additionalData: `@import "~@/styles/utils.less";`, // less工具函数的目录文件 一定要加分号
      	},
    },
  },
});

3.2 在vite.config.js配置less预处理器文件(2中的utils.less文件)

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        additionalData: '@import "./src/styles/utils.less";', // less工具函数的目录文件 一定要加分号
      }
    }
  },
})

4. 在页面中使用less工具函数

div {
  .vw(width, 500);
  .vh(height, 300);
  .font(14);
  .vw(padding-left, 5);
  .vh(padding-top, 12);
  .vh(line-height, 12);
}