如何实现三栏布局的响应式适配？大屏正常小屏布局错乱

期望实现的布局 #

原问题与代码 #

当前代码仅在大尺寸桌面、高分辨率大屏显示正常，小尺寸桌面、移动设备及低分辨率屏幕上布局错乱，需实现响应式适配。

原CSS代码 #

body {
         background: #000000 50% 50%;
         overflow-x: hidden;
         overflow-y: hidden;
         }
        .video{
         margin: 50px 20px;
         display: grid;
         place-items: center;
         height: 80vh;
         }
         .left {
         text-align: left;
         }
         .right {
         text-align: right;
         }
         .container {
         display: flex;
         align-items: center;
         justify-content: center;
         }

原HTML代码 #

<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
</head>
<body>
<div class="container">
    <div class="left">
        <p style="color: blue;">Title</p>
        <img src="https://place-hold.it/336x280" /> <br>
        <p style="color: blue;">Title</p>
        <img src="https://place-hold.it/280x500" />
    </div>
    
    <div class="video">
      <p style="color: blue;">Title</p>
      <img src="https://place-hold.it/500x500" />
    </div>
    
    <div class="right">
      <p style="color: blue;">title</p>
      <img src="https://place-hold.it/336x280" /> <br>
      <p style="color: blue;">Title</p>
      <img src="https://place-hold.it/280x500" />
    </div>
  </div>
</body>

适配修改方案 #

核心调整思路 #

• 用CSS媒体查询针对不同屏幕宽度切换布局结构
• 设置图片自适应宽度，维持比例避免溢出
• 优化容器的间距、对齐方式，适配不同尺寸设备

修改后的完整代码 #

CSS部分

body {
    background: #000000;
    overflow-x: hidden;
    /* 移除垂直隐藏，避免小屏内容被截断 */
}

.video {
    margin: 50px 20px;
    display: grid;
    place-items: center;
    height: auto; /* 小屏取消固定高度，自适应内容 */
    min-height: 80vh; /* 大屏保持最小高度 */
}

.left, .right {
    text-align: center; /* 小屏统一居中，大屏再分别左右对齐 */
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* 用gap替代margin，更灵活控制模块间距 */
    flex-wrap: wrap; /* 自动换行，防止小屏横向溢出 */
}

/* 大屏（≥1200px）保留原布局 */
@media (min-width: 1200px) {
    .left {
        text-align: left;
    }
    .right {
        text-align: right;
    }
    .video {
        height: 80vh;
    }
}

/* 中等屏幕（768px-1199px）切换垂直布局 */
@media (max-width: 1199px) {
    .container {
        flex-direction: column;
    }
    .video {
        order: -1; /* 视频模块移至最上方，优先展示核心内容 */
        margin: 20px 0;
    }
}

/* 图片全局自适应，保持比例 */
.container img {
    max-width: 100%;
    height: auto;
}

/* 小屏（≤767px）优化间距 */
@media (max-width: 767px) {
    .left, .right {
        padding: 0 15px;
    }
    .video {
        margin: 10px 0;
    }
}

HTML部分

<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<style>
/* 粘贴上面修改后的CSS代码 */
</style>
</head>
<body>
<div class="container">
    <div class="left">
        <p style="color: blue;">Title</p>
        <img src="https://place-hold.it/336x280" /> <br>
        <p style="color: blue;">Title</p>
        <img src="https://place-hold.it/280x500" />
    </div>
    
    <div class="video">
      <p style="color: blue;">Title</p>
      <img src="https://place-hold.it/500x500" />
    </div>
    
    <div class="right">
      <p style="color: blue;">title</p>
      <img src="https://place-hold.it/336x280" /> <br>
      <p style="color: blue;">Title</p>
      <img src="https://place-hold.it/280x500" />
    </div>
  </div>
</body>

适配效果说明 #

• 大屏（≥1200px）：维持原横向三栏布局，左右模块分别左右对齐，视频模块固定高度
• 中等屏幕（768px-1199px）：转为垂直布局，视频模块移到最上方，保证核心内容优先展示
• 小屏（≤767px）：压缩间距并添加内边距，图片自动适配屏幕宽度，避免内容贴边或溢出

内容的提问来源于stack exchange，提问作者Sted