CSS媒体查询本身不触发过渡动画，需手动用opacity、transform等可过渡属性配合transition实现“无缝切换”，并确保viewport标签正确设置。
做不到“无缝切换”——CSS 媒体查询本身不触发过渡动画，它只在断点条件满足/不满足的瞬间切换样式规则。所谓“无缝”，其实是靠你手动补上视觉过渡，而不是媒体查询自动提供的能力。
media query 断点触发时样式会突变，不是渐变
媒体查询没有内置动画或缓动逻辑。比如你在 @media (max-width: 767px) 里把 .nav 的 display 从 flex 改成 none，浏览器不会淡出或收起，而是直接隐藏。用户缩放窗口或旋转手机时，可能看到内容“跳一下”。
- 所有基于
display、visibility、position的切换都是立即生效的 -
width、margin、font-size等属性若没配transition，也不会过渡 - 真正能“动起来”的只有支持 CSS 过渡的属性（如
opacity、transform、height等），且需显式声明transition
用 transform + opacity + transition 模拟“平滑切换”
想让元素在断点切换时有入场/退场感，得避开 display: none，改用视觉隐藏+过渡组合：
- 用
opacity: 0+transform: translateY(-10px)隐藏，再配合transition: opacity 0.3s, transform 0.3s - 避免对
height做过渡（高度从 auto 到具体值无法动画），可用max-height替代（设一个足够大的固定值） - 移动端菜单展开时，优先用
transform: scaleY()或clip-path，比 height 更可靠
示例：
立即学习“前端免费学习笔记（深入）”；
.menu {
opacity: 1;
transform: scaleY(1);
transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (max-width: 767px) {
.menu {
opacity: 0;
transform: scaleY(0);
transform-origin: top;
}
}
断点数值选错会导致“中间态错乱”
常见错误是断点设在设备物理像素边界（如 768px），但实际触发时机取决于视口宽度（viewport width），不是设备宽度。用户缩放、地址栏弹出、iOS Safari 底部工具栏展开都会临时改变视口宽度，导致断点反复触发。
- 别用
768px作为唯一断点；建议用区间写法，如@media (min-width: 768px) and (max-width: 1023px)明确限定平板范围 - 桌面端增强样式建议统一用
min-width（移动优先），避免和max-width冲突 - 真机调试时注意：iOS Safari 横屏下视口宽度可能突然从 375px 变成 667px，但竖屏滚动后又回落——这不是 bug，是浏览器行为
viewport meta 标签缺失会让 media query 失效
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会以 980px 左右的虚拟视口渲染页面，@media (max-width: 767px) 就永远不匹配。
- 该标签必须放在
<head>内，且不能被 JS 动态插入（部分安卓 WebView 不识别） - 不要加
user-scalable=no，它会禁用双指缩放，影响可访问性 - 如果用了
initial-scale=1.0却仍显示缩放异常，检查是否有其他 meta 标签重复定义 viewport
最易被忽略的是：断点逻辑本身没问题，但 viewport 没设对，整套媒体查询就形同虚设。
