<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test div</title>
</head>
<style>
body,
html {
padding: 0;
margin: 0;
}
#app,
body,
html {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
}
#data-view {
width: 100%;
height: 100%;
background-color: #030409;
color: #fff;
}
#div1 {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
-webkit-transform-origin: left top;
transform-origin: left top;
z-index: 999;
background-image: url('http://datav.jiaminghi.com/demo/construction-data/img/bg.837e99ea.png');
background-size: 100% 100%;
flex-direction: column;
display: flex;
color: #fff;
}
</style>
<body>
<div id="app">
<div id="data-view">
<div id="div1">
<div style="width: 200px;height: 200px;border: 1px solid red;">
12121
</div>
</div>
</div>
</div>
</body>
</html>
<script>
console.log('window.screen',window.screen)
class myResize {
constructor(domName) {
this.dom = document.querySelector(domName);
this.allWidth = 0;
this.initConfig();
this.onResize();
}
initConfig = () => {
const { dom } = this;
const { width, height } = window.screen;
this.allWidth = width;
dom.style.width = `${width}px`;
dom.style.height = `${height}px`;
this.setAppScale();
}
setAppScale = () => {
const { allWidth, dom } = this;
const currentWidth = document.body.clientWidth;
dom.style.transform = `scale(${currentWidth / allWidth})`;
}
onResize = () => {
const {
initConfig
} = this;
window.addEventListener('resize', initConfig);
}
}
new myResize('#div1');
</script>
