简介
前端中大屏往往用于展示各种炫酷的界面和特效，因此特别受用好欢迎。
但是在开发过程中，常常也会出现各种问题，与一般的页面相比，
最让人头疼的是大屏的自适应问题。
使用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;
}
/* 大屏盒子box 使用fixed定位，将屏幕的尺寸设置为宽高 并通过 transform-origin: left top将变换的基点设置为屏幕左上角*/
.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;
//ww<wh情况: 1920/1920(ww) 1080/1080(wh)
//ww>wh情况:1920/1920(ww) 1080/1080(wh)
}
// 防抖
window.onresize = () => {
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
注意
同时还可以写防抖和多媒体查询使得屏幕缩放更加自如、
文章来源地址https://www.toymoban.com/news/detail-636347.html
文章来源：https://www.toymoban.com/news/detail-636347.html
到了这里，关于前端大屏自适应缩放的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
