1.js代码(同时使用了原生和jq,可自己分开)
1.style.zoom属性,获取最外层div的包含padding的长度和宽度(clientWidth和clientHeight), 比较长度和宽度的比例,
使style.zoom等于较小的比例,如果宽度大于高度就让宽度为1920px,否则就不做操作,让高度由内容撑开。
2.$(window).resize(function(){})
try {
if (document.querySelector(".MasScreenAuto")) {
$(document).ready(function () {
var w = document.querySelector("html").clientWidth / 1920;
var h = document.querySelector("html").clientHeight / 1080;
document.querySelector(".MasScreenAuto").style.zoom = w < h ? w : h;
if (w > h) {
document.querySelector(".MasScreenAuto").style.width = "1920px";
}
$(window).resize(function () {
var w2 = document.querySelector("html").clientWidth / 1920;
var h2 = document.querySelector("html").clientHeight / 1080;
document.querySelector(".MasScreenAuto").style.zoom = w2 < h2 ? w2 : h2;
if (w2 > h2) {
document.querySelector(".MasScreenAuto").style.width = "1920px";
}
});
});
}
} catch (e) {
console.log(e);
}
2.例子(需要自行引入jq (我引入了3.2.1版本))
1.html 代码
<div class="largeGreen MasScreenAuto">
<div class="box">
<div class="item">等比例缩放</div>
<div class="item">不会存在页面被遮挡情况</div>
<div class="item">注意css</div>
<div class="item">可原生可js</div>
</div>
<div class="box2">11</div>
</div>
2.css代码
<style>
* {
padding: 0;
margin: 0;
}
html {
width: 100%;
height: 100%;
color: #fff;
}
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: skyblue;
}
.largeGreen {
width: 100%;
background: url("img/bg.png") left top no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.box {
width: 100%;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 600px;
height: 200px;
background-color: orange;
font-size: 80px;
}
.box2 {
width: 100%;
height: 300px;
margin-top: 20px;
font-size: 64px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
3.效果(复制链接查看)


3.自定义大屏组件 (1)超出1920 * 1080 两边或上下留白
点击查看代码
<template>
<div class="MasScreenAuto">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'MasScreenAuto',
data() {
return {}
},
mounted() {
try {
let domApp = document.querySelector('.MasScreenAuto')
let w = document.querySelector('html').clientWidth / 1920
let h = document.querySelector('html').clientHeight / 1080
let zoom = w < h ? w : h
domApp.style.transform = `scale(${zoom})`
let cssStyle = `.MasScreenAutoe chartsDom canvas{transform:scale(${zoom})};`
let styleNode = document.createElement('style')
styleNode.type = 'text/css'
if (styleNode.styleSheet) {
styleNode.styleSheet.cssText = cssStyle
} else {
styleNode.innerHTML = cssStyle
}
let StyleDom = document.getElementsByTagName('head')[0]
StyleDom.insertBefore(styleNode, StyleDom.childNodes[0])
window.addEventListener('resize', function() {
let w2 = document.querySelector('html').clientWidth / 1920
let h2 = document.querySelector('html').clientHeight / 1080
let zoom2 = w2 < h2 ? w2 : h2
let cssStyle2 = `.MasScreenAuto canvas{zoom:${1 / zoom2};transform:scale(${zoom2})};`
let styleNode2 = document.createElement('style')
styleNode2.type = 'text/css'
if (styleNode2.styleSheet) {
styleNode2.styleSheet.cssText = cssStyle2
} else {
styleNode2.innerHTML = cssStyle2
}
let StyleDom2 = document.getElementsByTagName('head')[0]
StyleDom2.insertBefore(styleNode2, StyleDom2.childNodes[0])
document.querySelector('.MasScreenAuto').style.transform = `scale(${zoom2})`
})
} catch (e) {
console.log(e)
}
}
}
</script>
<style>
.MasScreenAuto {
width: 1920px;
height: 1080px;
}
.MasScreenAuto canvas {
transform-origin: 0% 0%;
}
</style>
4.自定义大屏组件(2)1920 * 1080 宽度自适应,高度不够显示滚动条
点击查看代码
<template>
<div class="go-preview scrollY">
<el-scrollbar>
<div class="go-preview-entity">
<div class="go-preview-scale">
<div class="MasScreenAuto">
<slot></slot>
</div>
</div>
</div>
</el-scrollbar>
</div>
</template>
<script>
export default {
name: "MasScreenAuto",
data() {
return {};
},
mounted() {
try {
let domApp = document.querySelector(".go-preview-entity");
let w = document.querySelector("html").clientWidth;
let h = 1080 * w / 1920;
let zoomW = document.querySelector("html").clientWidth / 1920;
document.querySelector(".go-preview-scale").style.transform = `scale(${zoomW},${zoomW})`;
domApp.style.width = `${w}px`;
domApp.style.height = `${h}px`;
window.addEventListener("resize", function () {
let w2 = document.querySelector("html").clientWidth;
let h2 = 1080 * w2 / 1920;
let zoomW2 = document.querySelector("html").clientWidth / 1920;
document.querySelector(".go-preview-scale").style.transform = `scale(${zoomW2},${zoomW2})`;
domApp.style.width = `${w2}px`;
domApp.style.height = `${h2}px`;
});
} catch (e) {
console.log(e);
}
},
};
</script>
<style>
.MasScreenAuto{
width: 1920px;
height: 1080px;
position: relative;
}
.MasScreenAuto canvas{
transform-origin:0% 0%;
}
.scrollY{
overflow-x: hidden;
}
.go-preview{
position: relative;
height: 100%;
width: 100%;
}
.go-preview .go-preview-entity {
overflow: hidden;
}
.go-preview.scrollY .go-preview-scale {
transform-origin: left top;
}
</style>
5.vue3大屏响应式
<div class="dataScreen-content" ref="dataScreenRef"></div>
const dataScreenRef = ref<HTMLElement | null>(null);
onMounted(() => {
if (dataScreenRef.value) {
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
dataScreenRef.value.style.width = `1920px`;
dataScreenRef.value.style.height = `1080px`;
}
window.addEventListener("resize", resize);
});
const resize = () => {
if (dataScreenRef.value) {
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
}
};
const getScale = (width = 1920, height = 1080) => {
let ww = window.innerWidth / width;
let wh = window.innerHeight / height;
return ww < wh ? ww : wh;
};
onBeforeUnmount(() => {
window.removeEventListener("resize", resize);
});
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?