vue3大屏自适应

直接使用

"sass": "^1.58.3",
"sass-loader": "^14.2.1",

style/utils.scss

@use "sass:math";

/**
定义设计稿的宽高，以实际设计稿的宽高为准
*/
$designWidth:1920;
$designHeight:1080;

/**
math.div()是css中的除法
*/
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}


@function vh($px) {
  @return math.div($px , $designHeight) * 100vh;
}

@function px2font($px) {
  @return math.div($px , $designWidth) * 100vw;
}

vite.config.ts

const viteConfig = defineConfig((mode: ConfigEnv) => {
	const env = loadEnv(mode.mode, process.cwd());
	return {
		plugins: [
			vue(), // Vue 插件
			....
		],

		server: {
			host: '0.0.0.0',
			.....
		},
		css: {
			preprocessorOptions: {
				css: { charset: false },
				scss: {
					javascriptEnabled: true,
					additionalData:
						'@import "./src/style/utils.scss";',
				},
			}
		},
    }
}

使用

::v-deep(.el-table__row) {
    height: vh(20);
	font-size: px2font(14);
}

ts使用

style/outoFit.ts

import { ref } from "vue";

const designWidth = ref(1920);
const designHeight = ref(1080);

export const pxToVw = (px: number): string =>
    `${(px * 100) / designWidth.value}vw`;
export const pxToVh = (px: number): string =>
    `${(px * 100) / designHeight.value}vh`;
export const pxToFont = (px: number): string =>
    `${(px * 100) / designWidth.value}vw`;

引用

import {pxToVw, pxToVh, pxToFont} from '/@/style/autoFit'