介绍一下做大屏比较好用的适配方案
分为一下两个步骤
1、写一个转换的函数
// /styles/screen.scss文件
@function div($number1, $number2) {
@return $number1 / $number2;
}
// 默认设计稿的宽度,可根据实际调整
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;
// px 转为 vw 的函数
@function vw($px) {
@return div($px, $designWidth) * 100vw;
}
// px 转为 vh 的函数
@function vh($px) {
@return div($px, $designHeight) * 100vh;
}
2、在使用页引入,函数的参数是设计图实际的像素值
<style lang="scss" scoped>
@import "@/styles/screen.scss";
.report-left {
width: vw(1920);
height: vh(1080);
}
</style>