最稳方案是直接切换容器的 grid-template-columns：小屏 1fr，平板 ≥768px 为 repeat(2, 1fr)，桌面 ≥1024px 可升为 repeat(3, 1fr)；须用 1fr 或 minmax(300px, 1fr) 避免固定像素破坏响应流。
用 grid-template-columns 切换两栏/单列最稳
直接改容器的 grid-template-columns，比操作子元素更可靠。小屏默认 1fr，平板（≥768px）切为 repeat(2, 1fr)，桌面（≥1024px）升为 repeat(3, 1fr)——但两栏场景只需前两级。
常见错误是写成 50% 50% 或 200px 1fr 后加媒体查询强行覆盖，结果小屏下左栏仍占 200px，右栏被压缩到看不见。
- 必须用
1fr 1fr或minmax(300px, 1fr) minmax(300px, 1fr)，避免固定像素打断响应流 -
gap: 1rem统一控制间距，别用margin，否则在单列时可能叠加出双倍空白 - 所有子元素无需设
width或float，Grid 自动按轨道分配，残留样式反而干扰布局
Flexbox 中 flex-basis 比 flex-direction 更关键
只改 flex-direction: column 不会让两栏变单列——子项仍按原有 flex-basis 占位，常导致横向溢出或错行。
真正起效的是让左右栏在小屏下「放弃宽度声明」：左栏设 flex: 0 0 auto（不伸缩、不收缩、内容定宽），右栏用 flex: 1 吃满剩余空间；大屏再切回 flex: 0 0 200px + flex: 1。
- 避免同时给子项设
width和flex，二者冲突，浏览器会优先按flex-basis计算 - 若右栏文字全是英文无空格，加
overflow-wrap: break-word防溢出 - 小屏切换时，
min-width: 300px可防止卡片类内容被压扁变形
JS 切换布局类名时别碰 style.gridTemplateColumns
用 element.classList.toggle('layout-grid') 切换预定义 CSS 类，比直接写 element.style.gridTemplateColumns = '1fr 1fr' 安全得多。
后者会覆盖媒体查询规则，导致横屏旋转后布局卡死；而且无法复用 gap、justify-items 等全局设置。
- 预定义两套类：
.layout-two-col { grid-template-columns: 1fr 1fr; }和.layout-one-col { grid-template-columns: 1fr; } - 切换前先读状态：
const isTwoCol = container.classList.contains('layout-two-col')，避免重复添加或漏删 - 按钮文案要同步更新，否则用户点两次才生效，体验断裂
双屏设备上仅靠媒体查询会失效
Surface Duo 展开后 window.innerWidth 是 1440px，但实际渲染区域是两个 720px 分屏——此时媒体查询判定为“大屏”，却该用单列流式布局。
必须结合 visualViewport.width 和 screen.orientation.angle 动态判断当前可视区域是否跨屏或折叠。
- 监听
visualviewport.resize事件，而非window.resize，前者响应更快、覆盖半展开等中间态 - 检测 UA 字符串里是否有
Fold、Duo、SC-51A，辅助识别设备类型 - 给容器加
data-layout="auto"，JS 根据实时数据切换layout-single/layout-split类，CSS 仅负责样式映射
grid-template-columns 或 flex-basis 上，大部分错位、溢出、读屏器乱序就自然消失。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
