使用 CSS 实现响应式文本与图片布局，核心在于结合 Flexbox 的弹性布局能力和 Media Queries 的条件样式应用。以下是具体实现方案：
一、基础布局结构（HTML）<div class="container"> <div class="col-left box"> <div class="containers"> <div class="main"> <label class="title">textheretextherertexthere</label> </div> </div> <div class="content"> <div class="text"> <label class="title">textheretextheretextheretextheretextheretexthere</label> </div> </div> </div> <div class="col-right box"> <img src="http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg"
/> </div></div>二、核心 CSS 样式1. 全局重置与基础样式* { box-sizing: border-box; outline: 0; padding: 0; margin: 0;}body { margin: 0;}- box-sizing: border-box 确保元素尺寸包含 padding 和 border，避免布局错位。
2. Flexbox 双栏布局.container { display: flex;}.col-left, .col-right { width: 50%;}.col-left { background: black; box-shadow: 16px 0px 26px rgba(0, 0, 0, 0.3);}.col-right { height: auto;}.col-right img { width: 100%; height: auto; background-repeat: no-repeat; background-size: cover; background-position: center center;}- .container 设置为 display: flex，默认主轴方向为水平（flex-direction: row）。
- .col-left 和 .col-right 初始宽度各占 50%。
- 图片处理：width: 100% 确保图片宽度填满容器，height: auto 保持宽高比，background-size: cover 防止图片变形。
3. 文本样式优化label { display: inline-block; max-width: 100%;}.container .main:after { clear: both; display: block; content: '';}.main { text-align: center; height: 120px;}.text { text-align: center; height: 213px;}.title { font-family: 'Inter'; font-style: italic; font-weight: 300; font-size: 36px; line-height: 44px; letter-spacing: 0.005em; color: #FFFFFF; overflow-wrap: break-word; padding: 5px;}- overflow-wrap: break-word 防止长文本溢出容器。
- 文本对齐：通过 text-align: center 居中显示。
三、响应式调整（Media Queries）当屏幕宽度小于 800px 时，将双栏改为单栏布局：
@media (max-width: 800px) { .container { flex-direction: column; text-align: center; align-items: center; } .col-left, .col-right { width: 100%; }}- flex-direction: column 将主轴方向改为垂直，实现上下堆叠。
- 宽度调整：左右栏宽度设为 100%，填满屏幕。
四、关键注意事项避免类名冲突确保 HTML 中不同元素不使用相同类名（如 .box 仅用于 .col-left 和 .col-right）。
优化 Media Queries减少断点数量，优先覆盖主流设备尺寸（如 800px、1200px）。
图片性能优化
使用 srcset 或 <picture> 标签为不同屏幕提供适配图片。
压缩图片文件，减少加载时间。
测试与调试使用浏览器开发者工具模拟不同设备，检查布局是否合理。
五、完整代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式布局</title> <style> * { box-sizing: border-box; outline: 0; padding: 0; margin: 0; } body { margin: 0; } .container { display: flex; } .box { position: relative; box-sizing: border-box; margin-bottom: 0; } .col-left { background: black; box-shadow: 16px 0px 26px rgba(0, 0, 0, 0.3); width: 50%; } .col-right { width: 50%; height: auto; } .col-right img { width: 100%; height: auto; background-repeat: no-repeat; background-size: cover; background-position: center center; } label { display: inline-block; max-width: 100%; } .container .main:after { clear: both; display: block; content: ''; } .main { text-align: center; height: 120px; } .text { text-align: center; height: 213px; } .title { font-family: 'Inter'; font-style: italic; font-weight: 300; font-size: 36px; line-height: 44px; letter-spacing: 0.005em; color: #FFFFFF; overflow-wrap: break-word; padding: 5px; } @media (max-width: 800px) { .container { flex-direction: column; text-align: center; align-items: center; } .col-left, .col-right { width: 100%; } } </style></head><body> <div class="container"> <div class="col-left box"> <div class="containers"> <div class="main"> <label class="title">textheretextherertexthere</label> </div> </div> <div class="content"> <div class="text"> <label class="title">textheretextheretextheretextheretextheretexthere</label> </div> </div> </div> <div class="col-right box"> <img src="http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg"
/> </div> </div></body></html>六、效果预览（注：实际效果需在浏览器中查看，
