// 使用 scss 的 math 函数
// https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math";
// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;
// px 转为 vw 的函数
@function vw($px) {
@return math.div($px, $designWidth) * 100vw;
}
// px 转为 vh 的函数
@function vh($px) {
@return math.div($px, $designHeight) * 100vh;
}
// 需要在vue.config.js里配置
module.exports = defineConfig({
// ...
css: {
loaderOptions: {
scss: {
additionalData: `
@use "~@/assets/styles/index.scss" as *;
`
}
}
},
// ...
});
// 使用
div {
width: vw(300);
height: vh(100);
font-size: vh(16);
margin-left: vw(10);
margin-top: vh(10);
border: vh(2) solid red;
}
参考地址：https://blog.csdn.net/m0_63710734/article/details/139881948
