大屏幕自适应

vue2框架

<template><div class="container"><divclass="ScaleBox"ref="ScaleBox":style="{width: width + 'px',height: height + 'px',}"><div class="contain"><div id="Stereoscopic-supervision"><div style="color: #fff; font-size: 16px;">大屏内容</div></div></div></div></div>
</template><script>
export default {data() {return {width: screen.availWidth,height: screen.availHeight,scale: 0,scaleHeight: 0,widthHeightScale: 0,};},mounted() {this.widthHeightScale = 2000 / screen.availWidth;this.setScale();window.addEventListener("resize", this.debounce(this.setScale));},methods: {toUserInfoIndex() {this.$refs.modalUserInfo.show();},//#region  自适应缩放getScale() {this.width = screen.availWidth * (this.widthHeightScale + 0.1);const { width, height } = this;const ww = window.innerWidth / width;return ww;},getScaleHeight() {this.height = screen.availHeight * this.widthHeightScale;const { width, height } = this;const wh = window.innerHeight / height;return wh;},setScale() {// 获取到缩放比例，设置它this.scale = this.getScale();this.scaleHeight = this.getScaleHeight();if (this.$refs.ScaleBox) {this.$refs.ScaleBox.style.setProperty("--scale", this.scale);this.$refs.ScaleBox.style.setProperty("--scaleHeight",this.scaleHeight);}},debounce(fn, delay) {const delays = delay || 500;let timer;return function () {const th = this;const args = arguments;if (timer) {clearTimeout(timer);}timer = setTimeout(function () {timer = null;fn.apply(th, args);}, delays);};}},
};
</script><style lang="scss" scoped>.ScaleBox {display: flex;transform: scale(var(--scale, 1), var(--scaleHeight, 1));transform-origin: 0 0;// 设计稿宽高width: 100vw;height: 100vh;
}.contain {width: 100%;height: 100%;overflow: auto;
}#Stereoscopic-supervision {  // 背景图min-height: 100%;background-image: url("/img/bm/StereoscopicSupervision/background.png");background-repeat: no-repeat;background-size: 100% 100%;font-size: 12px;position: relative;
}
.contain::-webkit-scrollbar {display: none;
}
</style>

react框架

jsx文件

import React, { useState, useEffect, useRef } from 'react';
import './App.css'; // 创建对应的 CSS 文件const ScaleBox = () => {const scaleBoxRef = useRef(null);const [dimensions, setDimensions] = useState({width: window.screen.availWidth,height: window.screen.availHeight,scale: 1,scaleHeight: 1,widthHeightScale: 2000 / window.screen.availWidth});const getScale = () => {const width = window.screen.availWidth * (dimensions.widthHeightScale + 0.1);const ww = window.innerWidth / width;return ww;};const getScaleHeight = () => {const height = window.screen.availHeight * dimensions.widthHeightScale;const wh = window.innerHeight / height;return wh;};const setScale = () => {const newScale = getScale();const newScaleHeight = getScaleHeight();setDimensions(prev => ({...prev,scale: newScale,scaleHeight: newScaleHeight}));if (scaleBoxRef.current) {scaleBoxRef.current.style.setProperty('--scale', newScale);scaleBoxRef.current.style.setProperty('--scaleHeight', newScaleHeight);}};const debounce = (fn, delay) => {const delays = delay || 500;let timer;return function () {const th = this;const args = arguments;if (timer) {clearTimeout(timer);}timer = setTimeout(function () {timer = null;fn.apply(th, args);}, delays);};};useEffect(() => {setScale();const debouncedHandleResize = debounce(setScale, 500);window.addEventListener('resize', debouncedHandleResize);return () => {window.removeEventListener('resize', debouncedHandleResize);};}, []);return (<div className="container"><divclassName="ScaleBox"ref={scaleBoxRef}style={{width: `${dimensions.width}px`,height: `${dimensions.height}px`,'--scale': dimensions.scale,'--scaleHeight': dimensions.scaleHeight}}><div className="contain"><div id="Stereoscopic-supervision"><div style={{ color: '#fff', fontSize: '16px' }}>大屏内容</div></div></div></div></div>);
};export default ScaleBox;

scss文件

.ScaleBox {display: flex;transform: scale(var(--scale, 1), var(--scaleHeight, 1));transform-origin: 0 0;/* 设计稿宽高 */width: 100vw;height: 100vh;
}.contain {width: 100%;height: 100%;overflow: auto;
}#Stereoscopic-supervision {  /* 背景图 */min-height: 100%;background-image: url("/img/bm/StereoscopicSupervision/background.png");background-repeat: no-repeat;background-size: 100% 100%;font-size: 12px;position: relative;
}.contain::-webkit-scrollbar {display: none;
}