大屏自适应方案

413211033

当屏幕宽高比例小于设计稿时，按设计稿比例沿水平方向铺满屏幕。当屏幕宽高比大于设计稿时，按设计稿比例沿垂直方向铺满屏幕。用等比缩放的方式，不论屏幕多大，分辨率是什么，都能呈现完美效果，如下图所示。

基于transform的自适应方法

首先计算缩放比，根据屏幕大小动态设置<div id="screen">元素的缩放比。代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>首页</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport"
content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no, viewport-fit=cover">
<style>
// 样式，元素大小完全按照设计稿大小设置
.screen-wrapper {
height: 100vh;
width: 100vw;
background-color: aqua;
}
.screen-wrapper .screen{
width: 1920px;
height: 1080px;
background: yellow;
transform-origin: 0 0;
position: absolute;
left: 50%;
}
.section{
height: 200px;
width: 200px;
outline: 1px solid #ddd;
line-height: 200px;
font-size: 40px;
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<div class="screen-wrapper">
<div class="screen" id="screen">
<div class="section">A</div>
<div class="section">B</div>
<div class="section">C</div>
<div class="section">D</div>
<div class="section">E</div>
</div>
</div>
<script>
function setScale(){
let designWidth = 1920;//设计稿的宽度，根据实际项目调整
let designHeight = 1080;//设计稿的高度，根据实际项目调整
let scale = document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ?
(document.documentElement.clientWidth / designWidth):
(document.documentElement.clientHeight / designHeight);
document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%)`;
}
window.onresize = function () {
setScale()
};
</script>
</body>
</html>

复制代码

大屏自适应方案

本帖子中包含更多资源

浏览过的版块

413211033 LV1