小屏幕下左右布局溢出应改为上下堆叠，默认块级垂直流，用min-width媒体查询在768px以上启用flex左右布局，并为内容设width:100%、max-width:100%及合理间距。
小屏幕下左右布局溢出，本质是固定宽度或横向排列逻辑没随视口收缩而调整。直接让左右结构在窄屏“躺平”为上下堆叠，是最自然、兼容性最好的解法。
把左右结构改成垂直堆叠
默认样式（小屏优先）不设浮动、不设 flex-row、不设 grid-template-columns，让两个区块自动按文档流上下排列。
- 移除左右布局相关属性，比如 float: left、display: flex; flex-direction: row、grid-template-columns: 1fr 1fr
- 确保左右两块容器本身是块级元素（如 div），默认就会垂直堆叠
- 若用了 inline-block 或其他非块行为，统一加 display: block
用媒体查询控制切换时机
只在屏幕足够宽时才启用左右布局，阈值建议设在 768px 或 992px，取决于你的内容密度。
- 写法示例：@media (min-width: 768px) { .layout-row { display: flex; } .left, .right { flex: 1; } }
- 避免用 max-width 做主断点，容易和其它规则冲突；优先用 min-width 显式声明“大屏才生效”
- 断点数值不要硬写 400px 这类过小值，实际手机横屏也常超 500px，768px 更贴近平板起始点
注意内部元素的宽度继承
左右区块切到纵向后，里面的图片、表单、卡片等仍可能因固定宽度溢出。
- 给所有可能撑宽的内容加 width: 100% 和 box-sizing: border-box
- 图片务必设 max-width: 100%; height: auto，防止原始尺寸突破容器
- 避免在子元素上写死 width: 600px 或 min-width: 300px，这类值会破坏堆叠后的自适应
额外优化：留出呼吸空间
堆叠后上下间距太紧会影响阅读，小屏需更宽松的节奏。
- 在媒体查询外（即小屏默认样式中）加大区块间 margin，比如 margin-bottom: 24px
- 大屏左右并列时可缩小该间距，用媒体查询覆盖：@media (min-width: 768px) { .left, .right { margin-bottom: 0; } }
- 文字行高、内边距也可同步微调，提升小屏可读性
