最稳解法是用display: flex配合@media媒体查询切换flex-direction: column，兼容现代移动端浏览器；关键在设置合理断点（如max-width: 600px）、父容器声明width: 100%、子项用flex: 1而非width: 50%，并添加min-width: 0防溢出。
直接用 display: flex 配合 @media 切换 flex-direction: column 就行，别碰 float 和 inline-block —— 它们在小屏上根本不可控。
为什么 flex-direction: column 是最稳解法
它不依赖内容尺寸，不触发重排抖动，语义清晰，且所有现代移动端浏览器（Safari 9+、Chrome 29+、Firefox 28+）都支持。关键不是“能不能堆叠”，而是“什么时候堆叠”：如果只写 display: flex 却没设断点，两栏会在窄屏上强行并列，文字折行、图片溢出、按钮错位全都会发生。
- 断点别硬套
768px，优先用max-width: 600px或max-width: calc(100vw - 2rem)，避开 iPad mini 等设备像素比陷阱 - 父容器必须设
width: 100%或max-width，否则 Flex 主轴空间算不准，flex: 1可能失效 - 子项别写死
width: 50%，改用flex: 1或flex-basis，避免 padding/border 撑破容器
移动端堆叠后横向溢出的三个隐藏原因
堆叠完成但页面仍出现横向滚动条？大概率不是 CSS 写错了，而是这些细节被忽略：
-
min-width: 0没加在子项上 → 浏览器按最长单词或 URL 强制撑开最小宽度，flex: 1直接失效 - 父容器没设
box-sizing: border-box→ padding 和 border 在 content-box 下额外加宽，挤占可用空间 - 某个子项里有未限制宽度的
<img>或长文本，又没配overflow-wrap: break-word或max-width: 100%
Grid 布局怎么安全降级到单列
如果用了 grid-template-columns: 1fr 1fr，手机端只需在媒体查询里覆盖成 grid-template-columns: 1fr —— 其他属性如 gap、grid-auto-rows 不用动。别写 100% 或 1fr 0fr，前者非法，后者冗余。
- 确保父容器有明确宽度来源（比如
width: 100%），否则 DevTools 里grid-template-columns可能显示为none - 旧版 Safari（iOS 14.5 之前）对
auto-fit支持不稳定，真要兼容就老实用@media - 如果原布局是
repeat(2, 1fr)，手机端就写grid-template-columns: 1fr，不要留空格或逗号
真正麻烦的从来不是“怎么切单列”，而是切完之后：首屏是否被侧边栏遮住、垂直间距是否突兀、有没有意外触发横向滚动——这些得一个个手动调，没法靠一个 media query 自动解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
