最省心方案是用CSS Grid配合媒体查询：桌面端设grid-template-columns: 30% 70%，移动端仅改@media (max-width: 414px) { grid-template-columns: 1fr; }，同步设置gap避免margin导致的横向溢出。
直接用 @media 切换容器的列定义或 Flex 行为，而不是删结构、藏内容或硬写 width: 100%——否则小屏下要么溢出，要么语义丢失，要么滚动条偷偷出现。
用 CSS Grid 实现双栏→单栏最省心
Grid 天然支持列数动态切换，无需操心子项对齐或换行逻辑。关键在 grid-template-columns 和媒体查询的配合：
- 桌面端写
grid-template-columns: 30% 70%或1fr 2fr，语义清晰、响应自然 - 移动端只改这一行：
@media (max-width: 768px) { grid-template-columns: 1fr; }，不碰子元素宽度、不加display: none - 务必设
gap（如gap: 1.5rem），别用margin-right模拟间距——后者在单列时会在最后一项右侧留白 - 避免
columns: 2（多列文本流），它只适用于纯段落，不能控制块级子元素顺序和尺寸
Flexbox 双栏回退单列必须设 flex-wrap: wrap
很多人写了 display: flex + width: 50%，却在移动端只改 width: 100%，结果发现两栏还是挤在同一行——因为默认 flex-wrap: nowrap 锁死了换行。
- 移动端媒体查询里必须显式加
flex-wrap: wrap，这是换行生效的前提 - 子项宽度建议用
width: 95%而非100%，防 box-sizing 或 border 导致水平溢出 - 加
margin: 0 auto让单列内容居中，比靠左更符合小屏阅读习惯 - 别设
align-items: stretch（Flex 默认值），简历/页脚这类高度不均的内容会视觉失衡；改用align-items: flex-start
断点别照搬 Bootstrap，优先看真实小屏 viewport 宽度
很多安卓机物理像素高但 viewport 宽度只有 360–414px，@media (max-width: 576px) 在这些设备上根本不会触发。
- 稳妥起见，用
@media (max-width: 480px)或@media (max-width: 414px)作为移动端切换单列的临界点 - 如果项目已用 rem 基准，可改用
@media (max-width: 30rem)（按 1rem = 16px 算，即 480px） - 别依赖 JS 检测屏幕宽：CSS 媒体查询才是布局层的正确响应方式，JS 更适合处理交互态（如点击展开）
真正容易被忽略的是：双栏变单栏不是“让页面窄一点”，而是重新定义内容流向。Grid 的 1fr、Flex 的 flex-wrap、以及断点数值的选择，三者缺一不可——漏掉任意一个，都可能让小屏用户滑着滑着突然发现底部内容不见了，或者手指点不到链接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
