界面自适应

宽高等比例缩放自适应使用remimport{onMounted,onBeforeUnmount}fromvueimport{debounce}fromlodashonMounted((){resize()window.addEventListener(resize,resize)})onBeforeUnmount((){window.removeEventListener(resize,resize)})constresizedebounce(function(){constdeviceWidthwindow.innerWidthconstdeviceHeightwindow.innerHeight// 1920 * 1080为视觉稿宽度document.documentElement.style.fontSize${Math.min(deviceWidth/1920,deviceHeight/1080)}px},200)style #app{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:black;overflow:hidden;}/style基于transform: scale(x, y)自适应templatedivclasshome:styletransformStyle/div/templatescriptsetupimport{ref,onMounted,onBeforeUnmount}fromvueconsttransformStyleref()// 缩放样式// 缩放适配functionsetScale(){constscaleXwindow.innerWidth/1920constscaleYwindow.innerHeight/1080transformStyle.valuetransform: scale(${scaleX},${scaleY})}onMounted((){setScale()// 初始缩放window.addEventListener(resize,setScale)// 监听窗口缩放})onBeforeUnmount((){window.removeEventListener(resize,setScale)// 移除监听窗口缩放})/scriptstylelangscssscoped.home{width:1920px;height:1080px;background-image:url(~/assets/images/home-bg.png);background-size:100% 100%;position:absolute;left:0;right:0;overflow:hidden;transform-origin:0 0;}/styletemplatedivclasshome-container:styletransformStyledivclassleftdivclassleft__headerheader/divdivclassleft__contentcontnet/divdivclassleft__footerfooter/div/divdivclassmiddle/divdivclassrightdivclassright__headerheader/divdivclassright__contentcontnet/divdivclassright__footerfooter/div/div/div/templatescriptimport{debounce}fromlodashexportdefault{data(){return{transformStyle:,}},mounted(){this.setScale()window.addEventListener(resize,this.setScale)},beforeDestroy(){window.removeEventListener(resize,this.setScale)},methods:{setScale(){// const scaleX document.documentElement.clientWidth / 1920// const scaleY document.documentElement.clientHeight / 1080// 浏览器窗口的视口viewport宽度constscaleXwindow.innerWidth/1920constscaleYwindow.innerHeight/1080this.transformStyletransform: scale(${scaleX},${scaleX})}}}/scriptstylelangscssscoped.home-container{width:1920px;height:1080px;background-image:url(~/assets/images/bg.png);background-size:100% 100%;transform-origin:0 0;// 更改转换元素的位置position:absolute;left:0;right:0;overflow:hidden;.left, .right{width:300px;height:100%;background-color:rgba(255,255,255,0.1);float:left;color:#ffffff;font-size:22px;__header{width:100%;height:40px;border-bottom:1px solid #e1e1e1;text-align:center;line-height:39px;}__content{width:100%;height:calc(100% - 80px);display:flex;justify-content:center;align-items:center;}__footer{width:100%;height:40px;border-top:1px solid #e1e1e1;text-align:center;line-height:39px;}}.middle{width:calc(100% - 600px);height:100%;float:left;}}/style