实现大屏适配方案
<!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;
}
body {
position: relative;
width: 1920px;
height: 1080px;
border: 3px solid red;
transform-origin: left top;
box-sizing: border-box;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
li {
width: 33.333%;
height: 50%;
font-size: 30px;
list-style: none;
border: 3px solid green;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
let targetX=1920
let targetY=1080
let targetRatio=16/9//宽高比例
let currentX=document.documentElement.clientWidth
let currentY=document.documentElement.clientHeight
console.log(currentX,currentY)
//计算高宽比例
let scaleRadio=currentX/targetX//参照宽度进行缩放
let currentRadio=currentX/currentY//当前屏幕宽高比例
// 超宽屏
if(currentRadio>targetRatio){
console.log('超宽屏')
//设置缩放比例
scaleRadio=currentY/targetY
document.body.style=`transform:scale(${scaleRadio}) translateX(-50%);left:50%`
}else{
console.log('标准屏')
//设置缩放比例
scaleRadio=currentX/targetX
document.body.style=`transform:scale(${scaleRadio})`
}
//设置rem基准值
</script>
</body>
</html>
方案一：scale实现大屏适配
