Flexbox与JavaScript结合：构建自适应两列布局及视频等高堆叠教程-html教程-PHP中文网

Flexbox与JavaScript结合：构建自适应两列布局及视频等高堆叠教程

本教程详细介绍了如何利用flexbox和javascript构建一个响应式两列布局。该布局包含一个视频和一个文本内容区域，旨在解决在不同屏幕尺寸下，特别是在小屏幕堆叠时，保持两列等宽等高以及视频内容正确缩放的挑战。通过结合css媒体查询实现基础响应式，并运用javascript的`window.onresize`和`getcomputedstyle`方法，实现列尺寸的动态同步，确保布局的视觉一致性和内容的良好呈现。

响应式两列布局的挑战

在现代网页设计中，构建适应不同屏幕尺寸的响应式布局是核心需求。常见的布局模式是两列并排显示，例如左侧放置视频，右侧放置相关文本。然而，在小屏幕设备上，为了优化用户体验，通常需要将这两列从并排改为垂直堆叠。

在实现这种转换时，我们面临几个挑战：

等高问题： 无论是在并排还是堆叠状态，确保两列（尤其是内容高度不固定的列，如文本或外部嵌入视频）能够保持视觉上的等高，避免出现不协调的空白。
等宽问题： 在堆叠时，两列应各自占据父容器的全部宽度（100%），而不是保留并排时的相对宽度。
视频自适应： 嵌入式视频（如YouTube iframe）需要正确缩放，以适应其容器的宽度，并保持其固有的宽高比，同时不影响布局的整体高度。

纯CSS在某些等高场景下表现出色（例如使用display: flex; align-items: stretch;），但当涉及到外部嵌入内容（如<iframe>）且需要精确控制其父容器高度以匹配另一列时，可能会遇到局限。此时，结合JavaScript进行动态尺寸计算和调整成为一种强大且灵活的解决方案。

Flexbox实现基础响应式结构

首先，我们使用Flexbox来构建基础的两列布局，并通过媒体查询实现小屏幕下的堆叠效果。

立即学习“Java免费学习笔记（深入）”；

HTML结构： 我们将使用一个外部容器.page-wrapper2，一个Flex容器.row，以及两个.column作为主要内容列。每个.column内部再包含一个实际内容容器（.blue-column用于视频，.red-column用于文本），并为它们添加ID以便JavaScript操作。

<div class='page-wrapper2'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column' id="blue-column">
        <!-- 嵌入式视频，例如YouTube iframe -->
        <iframe width="100%" height="315" src="https://www.youtube.com/embed/YIOb5_WCsOY" title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe>
      </div>
    </div>
    <div class='column'>
      <div class='red-column' id="red-column">
        <h2>红色列标题</h2>
        <p>这是红色列的示例文本内容。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button>立即观看</button>
      </div>
    </div>
  </div>
</div>

登录后复制

CSS样式： 以下CSS代码定义了Flex容器的行为，并使用媒体查询在屏幕宽度小于等于800px时将列方向改为垂直。

.page-wrapper2 {
  margin: 0px;
  border: 2px solid black; /* 边框仅为演示目的 */
}

.row {
  display: flex;
  flex-direction: row; /* 默认并排显示 */
  flex-wrap: wrap; /* 允许换行，虽然在此场景下主要由媒体查询控制 */
  width: 100%;
}

.column {
  display: flex; /* 使内部内容容器也能利用Flexbox */
  flex-direction: column;
  flex-basis: 100%; /* 默认占据100%宽度，但flex: 1会覆盖 */
  flex: 1; /* 每个列平均分配剩余空间，实现等宽 */
}

.blue-column {
  background-color: #add8e6; /* 浅蓝色背景，用于测试 */
  height: 100%; /* 尝试占据父容器100%高度 */
  padding: 20px; /* 增加内边距 */
  box-sizing: border-box; /* 边框盒模型 */
}

.red-column {
  background-color: #ffcccb; /* 浅红色背景，用于测试 */
  height: 100%; /* 尝试占据父容器100%高度 */
  padding: 20px; /* 增加内边距 */
  box-sizing: border-box; /* 边框盒模型 */
}

/* 媒体查询：当屏幕宽度小于等于800px时 */
@media screen and (max-width: 800px) {
  .row {
    flex-direction: column; /* 将列方向改为垂直堆叠 */
  }
}

/* 确保iframe宽度自适应，高度固定或由JS控制 */
iframe {
  max-width: 100%;
  height: auto; /* 允许iframe高度自适应，如果设置了固定高度，此属性可能被覆盖 */
  display: block; /* 移除可能的内联元素底部间隙 */
}

登录后复制

注意： 在iframe中设置height="315"会给视频一个固定的高度，这在某些情况下可能需要进一步调整以实现真正的响应式高宽比。然而，本教程的重点是同步两个父容器（.blue-column和.red-column）的高度。

JavaScript动态同步列尺寸

尽管Flexbox提供了强大的布局能力，但在处理像嵌入式视频这样具有固定高度或复杂内容且需要精确匹配另一列高度的场景时，纯CSS可能难以完美实现。此时，JavaScript可以派上用场，通过获取一个元素的计算样式并将其应用到另一个元素，实现动态的高度和宽度同步。

叮当好记-AI音视频转图文

AI音视频转录与总结，内容学习效率 x10！

193

查看详情

我们将使用window.onresize事件监听窗口大小的变化，并在每次变化时执行一个函数来同步两列的高度和宽度。同时，为了确保页面初次加载时也能正确同步，我们也会在window.onload事件中调用此函数。

/**
 * 同步指定列的高度和宽度。
 * 目标是将 red-column 的尺寸设置为 blue-column 的计算尺寸。
 */
function synchronizeColumnDimensions() {
  const blueColumn = document.querySelector('#blue-column');
  const redColumn = document.querySelector('#red-column');

  if (blueColumn && redColumn) {
    // 获取 blue-column 的最终计算样式
    const blueComputedStyle = window.getComputedStyle(blueColumn);

    // 将 blue-column 的计算高度和宽度应用到 red-column
    // 这确保了无论布局是并排还是堆叠，red-column 都能与 blue-column 保持相同的尺寸
    redColumn.style.height = blueComputedStyle.height;
    redColumn.style.width = blueComputedStyle.width;
  }
}

// 页面加载完成后执行一次尺寸同步
window.addEventListener('load', synchronizeColumnDimensions);

// 窗口大小改变时执行尺寸同步
window.addEventListener('resize', synchronizeColumnDimensions);

登录后复制

JavaScript工作原理：

synchronizeColumnDimensions()函数： 这个函数负责执行尺寸同步逻辑。
document.querySelector()： 通过ID选择器获取到视频容器（#blue-column）和文本容器（#red-column）的DOM元素。
window.getComputedStyle(blueColumn)： 这是一个关键的Web API，它返回一个对象，包含元素所有CSS属性的最终计算值。这意味着它考虑了所有样式表、内联样式、用户代理样式以及任何JavaScript对样式的修改。我们从中获取height和width。
redColumn.style.height = blueComputedStyle.height; 和 redColumn.style.width = blueComputedStyle.width;： 将从blue-column获取到的计算高度和宽度值直接赋给red-column的内联样式。内联样式具有最高的优先级，因此会覆盖CSS文件中定义的样式。
事件监听：
- window.addEventListener('load', synchronizeColumnDimensions);：确保在整个页面（包括所有资源如图片、iframe等）加载完成后，执行一次尺寸同步，以处理初始布局。
- window.addEventListener('resize', synchronizeColumnDimensions);：监听浏览器窗口大小的变化。当用户调整窗口大小时，此事件会触发，从而重新计算并同步列的尺寸。

完整代码示例

将上述HTML、CSS和JavaScript代码整合到你的项目中。通常，HTML放在.html文件中，CSS放在.css文件中并链接到HTML，JavaScript放在.js文件中并链接到HTML（建议放在</body>标签之前）。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式两列布局与视频等高堆叠</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class='page-wrapper2'>
        <div class='row'>
            <div class='column'>
                <div class='blue-column' id="blue-column">
                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/YIOb5_WCsOY" title="YouTube video player"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
                </div>
            </div>
            <div class='column'>
                <div class='red-column' id="red-column">
                    <h2>红色列标题</h2>
                    <p>这是红色列的示例文本内容。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <button>立即观看</button>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

登录后复制

style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.page-wrapper2 {
    margin: 20px;
    border: 2px solid #333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #fff;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    min-width: 0; /* 修复Flex项目在某些情况下内容溢出问题 */
}

.blue-column {
    background-color: #e0f7fa; /* 浅蓝色背景 */
    padding: 20px;
    box-sizing: border-box;
    display: flex; /* 使iframe能更好地填充 */
    justify-content: center;
    align-items: center;
}

.red-column {
    background-color: #ffebee; /* 浅红色背景 */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.red-column h2 {
    margin-top: 0;
    color: #c62828;
}

.red-column p {
    line-height: 1.6;
    color: #333;
}

.red-column button {
    background-color: #c62828;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.red-column button:hover {
    background-color: #d32f2f;
}

/* 确保iframe宽度自适应，高度固定或由JS控制 */
iframe {
    max-width: 100%;
    height: 315px; /* 保持iframe的固定高度 */
    display: block;
}

/* 媒体查询：当屏幕宽度小于等于800px时 */
@media screen and (max-width: 800px) {
    .row {
        flex-direction: column; /* 将列方向改为垂直堆叠 */
    }
    .blue-column, .red-column {
        padding: 15px; /* 调整小屏幕内边距 */
    }
    iframe {
        height: 250px; /* 小屏幕下可以适当调整iframe高度 */
    }
}

登录后复制

script.js

/**
 * 同步指定列的高度和宽度。
 * 目标是将 red-column 的尺寸设置为 blue-column 的计算尺寸。
 */
function synchronizeColumnDimensions() {
    const blueColumn = document.querySelector('#blue-column');
    const redColumn = document.querySelector('#red-column');

    if (blueColumn && redColumn) {
        // 获取 blue-column 的最终计算样式
        const blueComputedStyle = window.getComputedStyle(blueColumn);

        // 将 blue-column 的计算高度和宽度应用到 red-column
        // 这确保了无论布局是并排还是堆叠，red-column 都能与 blue-column 保持相同的尺寸
        redColumn.style.height = blueComputedStyle.height;
        redColumn.style.width = blueComputedStyle.width;
    }
}

// 页面加载完成后执行一次尺寸同步
window.addEventListener('load', synchronizeColumnDimensions);

// 窗口大小改变时执行尺寸同步
// 建议在生产环境中使用节流（throttle）或防抖（debounce）优化性能
window.addEventListener('resize', synchronizeColumnDimensions);

登录后复制