1. Premise
The project is a large-screen display on the PC side, which is mainly divided into two sections: the top navigation bar and the bottom content; technical aspects. Only use native jqwriting, iframe multi-page jump, use bootstrapbeautification style. Among them, some pages are inconvenient to make responsive adjustments, and the UI does not give a corresponding design. After analysis, it was decided to use the entire page as a whole to respond to changes in the viewport.
However, the top navigation bar has a dark background, and the entire block is compressed and stretched, which will inevitably lead to blank spaces on the left and right sides of the navigation bar, as follows:
Repeated calculations, if the content of the top navigation bar, including the background image, is extracted to respond, it will be displayed in full screen or in part. In the case of stretching, some parts of the content will be blocked. Finally, it was decided to take the "real content part" in the picture as a whole, so that the width is the width of cyan, and the height is the height of the full screen, so there is no need to subtract the height of the navigation bar from the height to cause errors.
2. Content and navigation bar structure processing
Structurally, it is divided into two parts: navigation background and real content
<body>
<!--导航栏背景元素-->
<div class="screen-header">
<div class="home-nav"></div>
</div>
<!-- 包裹网页 -->
<div class="screen-wrap">
<!--内容导航栏-->
<div class="home-nav-bar">
<div class="hn-left">
<div class="hn-logo"><img src="./images/logo.png" alt=""></div>
<span class="hn-title">xxx管理平台</span>
</div>
<div class="hn-right">
<div class="hn-time pc-show">欢迎登录！<span>2021/10/13/11:45</span></div>
</div>
</div>
<!-- 内容子页面 -->
<iframe src="data.html" frameborder="0" class="page"></iframe>
</div>
</body>
css processing:
html,body{
width:100%;
height:100%;
overflow:hidden;
}
.screen-header{
/*包裹单独导航图片容器*/
width:100%;
height:88px;
top:0;
left:0;
transform-origin: 0 0;
transition:0.5s;
}
.home-nav{
/*顶部导航图片*/
background:url('../images/header.png') center/100% 100% no-repeat;
width:100%;
height:100%;
}
.screen-wrap{
/*内容1部分*/
width:1920px;/*内容部分一定要有固定的宽高，才能方便后续计算*/
height:937px;/*大屏下，不带浏览器导航栏的高度*/
box-sizing: border-box;
position:absolute;/*方便将导航栏的文字内容对应到导航背景图位置*/
top:0;
left:50%;
transform-origin:0 0 ;
transition:0.5s;
border:1px solid red;
}
.screen-wrap-all{
/*浏览器全屏状态下备用高度*/
height:980px;
}
3. Response processing
When the screen is zoomed, the image and content of the navigation bar are processed synchronously
let scTimer = null;
let scale = 0;
function getScale(){
const ww = document.documentElement.clientWidth/1920;
const wh = document.documentElement.clientHeight/937;
scale = ww < wh ? ww : wh;
}
function setScale(){
getScale();
if(document.documentElement.clientWidth == 1920 && document.documentElement.clientHeight == 1080){
//全屏按钮模式：浏览器导航栏隐藏
document.querySelector(".screen-wrap").className = "screen-wrap screen-wrap-all";
document.querySelector(".screen-wrap").style.transform = "scale(1) translate(-50%, 0)";
// 顶部导航栏样式
document.querySelector(".screen-header").style.height = "100px";
}else{
//自由模式伸缩
document.querySelector(".screen-wrap").className = "screen-wrap";
document.querySelector(".screen-wrap").style.transform = "scale(" + scale + ") translate(-50%, 0)";
// 顶部导航栏样式
document.querySelector(".screen-header").style.height = scale * 88 + "px";
}
}
function debounce(){
//延迟响应,减缓浏览器压力
if(scTimer)clearTimeout(scTimer);
scTimer = setTimeout(()=>{
setScale();
},1000)
}
setScale();
window.addEventListener("resize",debounce);
Other instructions:
translate(-50%, 0), mainly cooperates with the absolute positioning of the wrapped div and left:50%, so that the content display part will always be displayed in the center