在网页设计中，视频窗口的大小往往需要根据不同的设备和屏幕尺寸进行调整。传统的固定尺寸视频窗口在屏幕尺寸变化时可能会显得不协调，影响用户体验。本文将介绍一种简单的方法，使用CSS使视频窗口能够轻松适应不同屏幕尺寸，从而告别固定尺寸的烦恼。

1. 使用CSS的max-width属性

首先，你可以为视频容器（通常是一个div元素）添加max-width属性，并将其值设置为100%。这样，无论屏幕尺寸如何变化，视频容器都不会超过屏幕宽度。

.video-container {
    max-width: 100%;
    width: 640px; /* 你可以设置一个基础宽度 */
    height: 360px; /* 根据基础宽度按比例设置高度 */
    margin: 0 auto; /* 居中对齐 */
    position: relative; /* 设置定位上下文 */
}

2. 使用CSS的padding-top技巧

对于16:9或4:3这样的常见视频比例，可以使用padding-top属性来实现响应式的高度调整。这种方法不需要改变视频容器的宽度，而是通过padding-top来保持视频的宽高比。

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9比例的宽高比 */
    /* 其他样式 */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 其他样式 */
}

在这个例子中，padding-top的值是根据视频的宽高比计算得出的。对于16:9的比例，计算公式为 (9 / 16) * 100%。

3. 使用CSS的object-fit属性

object-fit属性可以控制替换元素（如img或video）的尺寸和形状。通过设置object-fit: cover;，视频会覆盖整个容器，同时保持其原始的宽高比。

.video-container {
    position: relative;
    width: 100%;
    /* 其他样式 */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 其他样式 */
}

使用这种方法，视频窗口会自动调整大小以适应容器，同时保持其宽高比。

4. 结合使用JavaScript

在某些情况下，你可能需要结合使用JavaScript来动态调整视频窗口的大小。以下是一个简单的JavaScript代码示例，用于根据屏幕宽度调整视频窗口的高度：

function adjustVideoSize() {
    var videoContainer = document.querySelector('.video-container');
    var video = videoContainer.querySelector('video');
    var screenWidth = window.innerWidth;
    var baseWidth = 640; // 基础宽度
    var baseHeight = 360; // 基础高度

    videoContainer.style.width = screenWidth + 'px';
    videoContainer.style.height = (screenWidth / baseWidth) * baseHeight + 'px';
}

window.addEventListener('resize', adjustVideoSize);

// 初始化视频尺寸
adjustVideoSize();

总结

通过以上方法，你可以轻松调整DIV CSS视频窗口的大小，使其在不同屏幕尺寸下都能保持良好的显示效果。选择最适合你项目需求的方法，让你的视频内容在各种设备上都能提供良好的观看体验。