v-scale-screen 原理
大屏项目中的适配屏幕大小缩放原理demo还原
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0px;padding: 0px;}#app {background-color: antiquewhite;width: 1920px;height: 1080px;}</style>
</head><body><div id="app"></div>
</body></html>
<script>const autoScale = (selector, option) => {const el = document.querySelector(selector);let { width, height } = option;el.style.transformOrigin = 'top left';el.style.transition = 'all 0.5s';const init = () => {const scaleX = innerWidth / width;const scaleY = innerHeight / height;//去最小值const scale = Math.min(scaleX, scaleY);const left = (innerWidth - width * scale) / 2;let top = (innerHeight - height * scale) / 2;//居中并缩放el.style.transform = `translate(${left}px,${top}px) scale(${scale}) `;};init();// window.onresize = () => init;// 这里可以写个防抖addEventListener('resize', init)};let option = {width: 1920,height: 1080,};autoScale('#app', option);
</script>
LF，CR，CRLF错乱影响Git上传Github或Gitee代码)
