我的位置：首页 › 数据可视化平台- 酷屏 › 酷屏-心得体验 › 一屏页面自适应代码处理方法

一屏页面自适应代码处理方法

复制链接 | 收藏本帖

1484

: 前端小姐姐小试身手Lv3

发表于2021-5-27 18:02

楼主

引言：在写大屏页面时，我们常需要用到自适应处理，使页面在不同分辨率的电脑上看到都是正常显示，下边就简单介绍下我在写一屏页面自适应的处理方法：

1、背景图放在body中自适应，避免内容缩放后，背景图正常铺满

body {
width: 100%;
height: 100vh;
overflow: hidden;
font-family: "微软雅黑";
background-image: url(../img-function/bg.png);
background-position: center;
background-color: #fff;
background-size: cover;
background-repeat: no-repeat;
}

2、设置最外层元素样式

<div class="content" id="content">

……

</div>

.content {
width: 100%;
height: 100%;
position: relative;
}

3、写js 处理不同屏幕缩放，给需要缩放的元素手动上加上‘childE’类，用js对这个类设置缩放样式

//针对不同屏幕缩放
var bodyW = document.body.clientWidth;
var zoom = bodyW / 1920;
var ele = document.querySelectorAll(".childE");
var i;
for (i = 0; i < ele.length; i++) {
ele.style.transform = 'scale(' + zoom + ')';
}
document.getElementById('content').classList.add('zoom');

然后通过 .zoom设置样式

左上元素设置样式：

.zoom .funNav{
transform-origin: left top;
}

右上元素设置样式：

.zoom .main{
transform-origin: right top;
}

左下元素设置样式：

.zoom .headlines{
transform-origin: left bottom;
}

右下元素设置样式：

.zoom .code{
transform-origin: right bottom;
}

4、写js处理浏览器可视化高度小于111时添加一个类，然后去添加样式

var screenH = window.screen.height;  //屏幕分辨率的高
var bodyH = document.body.offsetHeight;  //网页可见区域宽(body)
//一屏可视化高度小于111
if( screenH - bodyH > 111  ){
document.getElementById('content').classList.add('topMain');
}