媒体查询中用 display 控制显隐易错在：display: none 会清空内联样式和计算样式，导致 JS 获取尺寸为 0；应优先用 visibility/opacity 或绝对定位隐藏，若必须用 display 需同步处理 height、margin 和过渡，并注意 overflow-x 防横向滚动。
媒体查询中用 display 控制元素显隐容易错在哪
直接写 display: none 在小屏下隐藏导航栏看似合理，但若该元素后续被 JS 动态操作（比如点击展开菜单），display: none 会清空其所有内联样式和计算样式，导致 JS 的 offsetHeight、getBoundingClientRect() 返回 0，逻辑可能意外中断。
更稳妥的做法是结合 visibility 和 opacity，或用 position: absolute; left: -9999px 隐藏但保留布局占位。如果必须用 display，确保 JS 操作前先检查当前媒体状态，或统一用 CSS 自定义属性控制显隐逻辑。
- 避免在媒体查询里只改
display而不处理关联的height、margin或过渡动画 - 移动端隐藏侧边栏时，别忘了同时设置
overflow-x: hidden防止横向滚动条意外出现 - 使用
@media (max-width: 768px)时注意：Chrome DevTools 的“设备模拟”可能触发的是width（视口宽度），而非device-width，实际部署建议优先用max-width
用 flex + order 在不同断点调整元素顺序
响应式布局中常需改变 DOM 元素视觉顺序（比如把标题从顶部移到卡片底部），但又不想改动 HTML 结构。CSS 的 order 属性配合媒体查询是最轻量的解法，前提是父容器已设为 display: flex 或 display: inline-flex。
注意 order 只影响视觉顺序，不影响语义顺序和 tab 键焦点流，对可访问性有影响；如需兼顾，应配合 aria-order（不被原生支持）或改用 grid + grid-area 显式声明区域。
立即学习“前端免费学习笔记（深入）”；
.card {
display: flex;
flex-direction: column;
}
.card__title { order: 1; }
.card__content { order: 2; }
.card__footer { order: 3; }
@media (max-width: 480px) {
.card__title { order: 3; }
.card__footer { order: 1; }
}
justify-content 和 align-items 在媒体查询中失效的常见原因
写了 @media (min-width: 769px) { .container { justify-content: space-between; } } 却没生效？大概率是因为父容器没启用 Flex 布局，或者子元素本身是 float 或 inline 级元素——justify-content 只对 flex 容器的直接子项起作用，且要求子项不是 float、absolute 定位或 display: block 下的普通流内块级元素。
- 确认父容器已设
display: flex或display: grid，且未被后代的display: contents中断继承 - 移动端常用
flex-wrap: wrap，此时justify-content仍有效，但若子项总宽度超容器，首行对齐可能被第二行“挤偏”，建议加min-width: 0防子项溢出 - 不要在媒体查询里反复切换
flex-direction后还依赖同一套justify-content值，比如row下用flex-end是右对齐，换成column后就变成底对齐，容易误判
用 transform: translateX() 替代 left 做响应式微调
需要在大屏下把按钮向右挪 20px，小屏下归位？用 left: 20px 要求元素是 position: relative/absolute，会脱离文档流，干扰其他元素布局；而 transform: translateX(20px) 不影响布局流，且 GPU 加速更顺滑，适合动画或频繁重排场景。
但注意：若元素本身有 margin 或 padding，translate 不会改变这些值，视觉位置变了，但点击热区、JS 获取的 getBoundingClientRect() 仍按原始位置计算——调试时容易误以为“点不中”。必要时配合 pointer-events: none 或用 calc() 动态调整 margin。
@media (min-width: 1024px) {
.action-btn {
transform: translateX(20px);
}
}
@media (max-width: 480px) {
.action-btn {
transform: translateX(0);
}
}
真正难的不是写对媒体查询，而是判断某个对齐行为该由布局（flex/grid）、定位（position）、变换（transform）还是内容流（text-align/margin）来承担——选错层级，后面所有调整都会越来越拧。 
