注意:vue2和vue3安装版本不同
1、vue2安装指令
npm install v-scale-screen@1.0.0 --save
2、引入(main.js)
import VScaleScreen from "v-scale-screen";
Vue.use(VScaleScreen);
3、使用
<template>
<div>
<v-scale-screen
class="page-container"
width="1920"
height="1080"
:full-screen="false"
>
//width和height的值根据实际设计图的比例设置即可
//页面内容
</v-scale-screen>
</div>
</template>
<style scoped>
.page-container {
width: 100vw;
height: 100vh;
//以下三个值根据自己设计图调整即可
background: url(../../assets/bg.png) no-repeat !important;
background-size: cover !important;
background-color: #030d1e !important;
}
</style>