Let’s talk nonsense first:
大屏自适应适配也有一种方案是媒体查询，因为媒体查询个人觉得存在卡顿现象，因为是区间卡控，所以现在主流还是用rem和em做适配的比较多一点
下面代码中，js中的先给html根节点设置fontSize初始值为1px，是为了方便计算rem，这样的话多少像素的元素就写多少rem比较方便，举个例子：
有一个div是30px宽，40px高，直接设置下面的代码即可
div{
width:30rem;
height:40rem;
}
Attached below is the complete code for large screen adaptation (navigation part)
html+js code
<!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;
list-style: none;
}
html,body {
width: 100vw;
height: 100vh;
}
body{
background: url(./img/bg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
background-color: red;
}
.nav {
width: 100%;
height:50rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #01395f;
}
.left,.right{
width:25%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
color: #fff;
font-weight: 900;
}
.left li,.right li{
float: left;
width: 200rem;
height: 40rem;
line-height: 40rem;
text-align: center;
font-size: 22rem;
background:url(./img/title.png) no-repeat;
background-size: 100% 100%;
}
.t_bg {
float: left;
width: 400rem;
height: 50rem;
margin: 0 20rem;
color: #fff;
font-size: 30rem;
text-align: center;
}
.content{
width: 100vw;
height: calc(100vh - 50rem);
background-color: #00f;
}
</style>
</head>
<body>
<div class="nav">
<ul class="left">
<li class="nav_item">1号平台</li>
<li class="nav_item">2号平台</li>
<li class="nav_item">3号平台</li>
</ul>
<div class="t_bg" >中间图片位置</div>
<ul class="right">
<li class="nav_item">4号平台</li>
<li class="nav_item">5号平台</li>
<li class="nav_item">6号平台</li>
</ul>
</div>
<div class="content">
</div>
<script>
const baseSize=1
function setRem(){
const scale=document.documentElement.clientWidth/1920
document.documentElement.style.fontSize=baseSize*Math.min(scale,2)+'px'
}
setRem()
window.onresize=()=>{
setRem()
}
</script>
</body>
</html>