简介
前端中大屏往往用于展示各种炫酷的界面和特效，因此特别受用好欢迎。
但是在开发过程中，常常也会出现各种问题，与一般的页面相比，
最让人头疼的是大屏的自适应问题。
使用CSS中transform属性和js获取缩放比例方法
先简单写一下网页，先画一个大盒子container，再画自适应大屏盒子box，
再box中就是我们测试的两个小盒子。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><div class="box"><div class="top">我是top部分，2035年实现基本社会主义现代化</div><div class="bottom">我是bottom部分，
2050年实现第二个一百年奋斗目标，全面建成富强民主文明和谐美丽的社会主义现代化强国</div></div></div>
</body>
</html>
接着我们开始写css部分，主要用到vw和vh这两个属性单位和transform属性
* {margin: 0;padding: 0;}.container {width: 100vw;height: 100vh;background: url(./bg.png) no-repeat;background-size: cover;}.box {position: fixed;width: 1920px;height: 1080px;background: red;transform-origin: left top;left: 50%;top: 50%;}.top {width: 100px;height: 100px;background: hotpink;margin-left: 50px;}.bottom {width: 100px;height: 100px;background: skyblue;margin-left: 50px;margin-top: 100px;}
接着写js，通过resize控制屏幕尺寸大小
let box = document.querySelector('.box');box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`function getScale(w = 1920, h = 1080) {const ww = window.innerWidth / w;const wh = window.innerHeight / h;return ww < wh ? ww : wh;}window.onresize = () => {box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`}
注意
同时还可以写防抖和多媒体查询使得屏幕缩放更加自如、
