移动端单列布局在PC端转为多列需用@media切换display或grid-template-columns，关键在合理断点（如min-width: 48em）、同步重置父容器布局属性（padding/max-width/gap等），并避免使用float/inline-block；flex和grid更适配响应式，媒体查询应仅控制布局结构，非视觉样式宜用clamp()或CSS变量实现。
移动端单列布局在PC上变成多列，核心就靠 @media 切换 display 或 grid-template-columns
不用 JavaScript，纯 CSS 就能搞定。关键不是“怎么写媒体查询”，而是“在哪切、切什么、为什么不能只改宽度”。很多项目卡在 PC 端列间距错乱、子项高度不一致、或媒体查询没生效——通常是因为断点位置不合理，或者重置时漏掉了父容器的其他布局属性。
- 断点别硬写
768px，优先用min-width: 48em（即 768px，但语义更清晰） - 如果用
flex，移动端设flex-direction: column，PC 端重置为row并加flex-wrap: wrap - 如果用
grid，移动端设grid-template-columns: 1fr，PC 端改grid-template-columns: repeat(3, 1fr)，别忘了同步调gap - 务必检查父容器是否带
max-width或padding，这些在 PC 上容易挤压列宽，导致第三列掉行
为什么 float 和 inline-block 在响应式里基本该淘汰了
它们对媒体查询不敏感：你改了宽度，float 元素不会自动重排，inline-block 会因换行符或空格产生不可控间隙。更麻烦的是，一旦加了 margin 或 transform，PC 端列宽计算就失准。
-
float布局必须手动清除浮动，而媒体查询切换时，::after伪元素可能没重绘 -
inline-block的间隙本质是 HTML 文本节点，font-size: 0能压但副作用大（比如子元素需重设字体） - 现代方案中，
flex和grid的flex-basis/minmax()天然适配断点，无需 hack
常见错误：媒体查询写了，但 PC 端还是单列
八成是 CSS 优先级或作用域问题。最典型的是：媒体查询写在组件局部 CSS 里，但父级用了 !important 强制单列；或者媒体查询的 min-width 值比设计稿实际宽度小，结果在 1440px 屏幕上还没触发。
- 用浏览器 DevTools 的 “Toggle device toolbar” 检查当前匹配的媒体查询，别只看预设尺寸
- 确保媒体查询规则没有被更高权重的选择器覆盖（比如
.container .itemvs@media (...) .item） - 如果用 CSS-in-JS（如 Emotion），确认它支持嵌套媒体查询，否则
@media可能被忽略 - 不要在媒体查询里只改子元素宽度，父容器的
width、padding、box-sizing都得同步检查
性能提示：别在媒体查询里反复重定义整套字体/颜色/阴影
媒体查询只该管布局结构。把 font-size、color、box-shadow 这类非布局属性塞进 @media，不仅增加 CSS 体积，还让浏览器在窗口缩放时频繁重绘样式树。
立即学习“前端免费学习笔记（深入）”；
- 字体大小建议用
clamp(1rem, 2.5vw, 1.25rem)替代媒体查询 - 颜色和边框用 CSS 自定义属性（
--text-primary），媒体查询里只改变量值 - 阴影等开销大的属性，除非 PC 端真需要更强视觉层次，否则保持一致
真正难的不是写几行 @media，而是搞清哪些样式属于“布局响应”，哪些只是“视觉适配”——混在一起，后期维护时连自己都分不清哪条规则该删。
