移动端单列→pc端三列应通过@media(min-width:48em)覆盖grid-template-columns为repeat(3,1fr)，同步调整gap、max-width及min-width，并确保viewport meta和display:grid正确设置。
移动端单列 → PC端三列，直接改 grid-template-columns
核心就一条：移动端默认设 grid-template-columns: 1fr，PC端用 @media (min-width: 48em) 覆盖为 grid-template-columns: repeat(3, 1fr)。别碰 float 或 inline-block，它们在媒体查询里不自动重排，改了宽度也白搭。
常见错误现象：.stats 在 PC 上第三列掉到第二行、列宽被父容器 padding 挤变形、或者媒体查询写了但没生效。
- 断点别硬写
768px，用48em更语义清晰（等于 768px，且随用户字号缩放） - 必须同步重置
gap：移动端可能设gap: 8px，PC端建议加到16px，否则列间距太紧 - 父容器若带
max-width: 1200px，记得在 PC 媒体查询里一并调大或设为none，否则三列会被压窄 - 子项如果用了
min-width（比如min-width: 200px），在小屏下会撑破单列，要加@media (max-width: 48em)把它清掉
为什么不能只改子元素 width，还得动父容器的 display 和 padding
Grid 布局是父子强耦合的。只改子项 width 没用——grid 的列宽由 grid-template-columns 决定，子项的 width 属性会被忽略（除非显式设 justify-self）。
容易踩的坑：
- 父容器本身有
padding: 0 20px，PC端没重置，导致三列总可用宽度只剩100% - 40px，第三列必然换行 - 父容器用了
display: grid但没设grid-template-rows，移动端单列时高度正常，PC端三列后子项高度不一致（因为没定义行高约束） - 媒体查询写在组件级 CSS-in-JS 里（如 Emotion），但没开启嵌套支持，
@media规则被整个忽略
@media 里要不要写 display: grid？
不用。只要父容器默认就是 display: grid，媒体查询里只改 grid-template-columns 和配套属性即可。重复写 display: grid 不仅冗余，还可能因特异性问题覆盖不到其他规则。
但要注意：如果父容器默认是 display: flex，那 PC 端切 Grid 就得在媒体查询里同时写：
@media (min-width: 48em) {
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}
这时候漏掉 display: grid，grid-template-columns 就完全无效。
真机测试时媒体查询不触发？先查这三处
最常被忽略的是 HTML 头部缺失或写错的 <meta name="viewport">。没有它，移动端浏览器会以桌面视口（通常是 980px）渲染，max-width: 48em 根本不会匹配。
其他高频原因：
-
@media规则被更高权重的选择器覆盖，比如全局写了.stats { grid-template-columns: 1fr !important; } - 断点值设太小，比如用了
min-width: 30em（480px），结果在 iPhone 14 Pro Max（竖屏 430px）上就已触发，PC端反而没机会生效 - 用 DevTools 切“Responsive”模式时，没点右上角的 “Toggle device toolbar” 图标，导致媒体查询判断的是编辑器窗口宽度，不是模拟设备视口
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
