我们可以使用计算宽高比来实现屏幕的自适应性。
根据宽度和高度除以规定宽高的比例比较来决定使用scale缩放的边。通过监听窗口的变化来动态的通过缩放维持比例。
<!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: 0;
padding: 0;
box-sizing: border-box;
}
.container {
font-size: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">一个容器</div>
<script>
// 以 (1920,1080,1) 为基准
// 宽度小于横纵比的时候 以宽度计算
// 宽度大于横纵比的时候 以高度计算
function change(selector, setWidth = 1920, setHeight = 1080) {
// 获取元素
const $ = document.querySelector(selector);
// 获取屏幕宽高
const { innerWidth, innerHeight } = window;
// 获取屏幕宽高比
const ww = innerWidth / setWidth;
// 获取屏幕高度比
const wh = innerHeight / setHeight;
// 判断宽度是否小于规定比例，来决定使用宽度还是高度
const scale = ww < wh ? ww : wh;
// 设置样式
Object.assign($.style, {
position: "fixed",
left: "50%",
top: "50%",
width: `${setWidth}px`,
height: `${setHeight}px`,
transform: `translate(-50%,-50%) scale(${scale})`,
transformOrigin: "left top",
});
}
// 设置body样式
const resize = function () {
change(".container");
};
resize();
window.addEventListener("resize", resize);
</script>
</body>
</html>
