用js实现页面在不同分辨率下16:9的适配
时间: 2024-03-20 12:41:24 浏览: 11
实现页面在不同分辨率下16:9的适配,可以通过监听窗口大小的变化,动态计算页面元素的高度来实现。以下是使用JavaScript来实现页面在不同分辨率下16:9的适配的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面适配</title>
<style>
#container {
width: 100%;
}
#video {
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<video id="video" src="video.mp4" controls></video>
</div>
<script>
// 获取页面元素
var container = document.getElementById('container');
var video = document.getElementById('video');
// 计算视频高度
function setHeight() {
var height = container.offsetWidth * 9 / 16;
// 设置视频高度
video.style.height = height + 'px';
}
// 监听窗口大小的变化
window.addEventListener('resize', setHeight);
// 初始化页面高度
setHeight();
</script>
</body>
</html>
```
在上面的代码中,我们通过定义一个setHeight函数来计算视频高度并设置视频高度。然后通过监听窗口大小的变化来动态计算视频的高度并设置视频高度。最后,在页面加载完成后,调用一次setHeight函数来初始化页面高度。这样,页面就可以在不同的分辨率下保持16:9的宽高比例了。