媒体查询断点依据浏览器视口宽度（window.innerwidth），非设备物理分辨率或dpi；需声明viewport meta标签，推荐移动优先写法，常用断点为768px、1024px、1200px。
media query 的断点设置依据是什么
媒体查询是否生效，取决于浏览器视口宽度（window.innerWidth），不是设备物理分辨率，也不是屏幕 DPI。常见误区是照搬手机型号参数（如“iphone 14 是 1170×2532”），但实际渲染以 css 像素（即视口宽度）为准，受 <meta name="viewport"> 控制。
关键点：
- 必须在 HTML 中声明
<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端可能默认以 980px 宽度渲染，@media (max-width: 768px)就不会触发 - 推荐用「移动优先」写法：先写小屏样式，再用
@media (min-width: 768px)覆盖中大屏，避免重复覆盖和 !important 滥用 - 断点值不必严格对应某款设备，主流选择是
768px（平板竖屏）、1024px（平板横屏/小桌面）、1200px（常规桌面）
display: none 在媒体查询中为什么有时不生效
最常见原因是 CSS 优先级或层叠顺序问题，尤其是当元素同时被其他规则设定了 display、visibility 或 opacity。
排查建议：
立即学习“前端免费学习笔记（深入）”；
- 检查是否有更具体的 CSS 选择器（如
.header .nav-item）覆盖了媒体查询里的display: none - 确认没有内联样式（
style="display: block"）——它的优先级高于外部媒体查询 - 避免混用
display: none和visibility: hidden：前者完全移出文档流，后者仍占空间；若父元素用了visibility: hidden，子元素的display: none会被忽略 - 动画类库（如 AOS、Animate.css）可能动态添加 class 并强制设
display: block，需在媒体查询中显式重置
如何让同一元素在不同断点下切换显示方式（比如 PC 显示图标+文字，手机只显示图标）
核心思路是用两个容器分别包裹不同内容，再配合媒体查询控制显隐。不推荐用 js 切换文本，纯 CSS 更可靠、无闪动、利于 seo。
典型结构示例：
<nav class="top-nav"> <span class="nav-label-desktop">首页</span> <span class="nav-label-mobile">?</span> </nav>CSS 写法：
.nav-label-desktop { display: inline; } .nav-label-mobile { display: none; } @media (max-width: 767px) { .nav-label-desktop { display: none; } .nav-label-mobile { display: inline; } }注意：
- 不要给两个元素都设
position: absolute再靠z-index切换——容易引发焦点丢失、读屏器识别异常 - 若用伪元素（
::before）插入图标，确保content在媒体查询中可独立控制，例如：@media (max-width: 767px) { .nav-item::after { content: "?"; } } - 字体图标（如 Font Awesome）建议用
<i class="fa-home"></i>单独封装，便于统一控制显隐
用 prefers-reduced-motion 配合媒体查询隐藏动画元素是否可靠
是的，但仅限于用户明确开启「减少运动」系统偏好时才生效，不能替代响应式断点。它属于增强体验的辅助功能，不是响应式布局主干。
实操要点：
- 写法是
@media (prefers-reduced-motion: reduce)，不是@media screen and (prefers-reduced-motion) - 它和分辨率媒体查询可嵌套使用，例如：
@media (max-width: 768px) and (prefers-reduced-motion: reduce) - 对
display: none本身无影响，但可用于关闭transition、animation，或把opacity: 0.5改为opacity: 1等细微调整 - 注意 safari 对
prefers-reduced-motion的支持从 v14 开始，旧版本会直接忽略该媒体查询
CSS 媒体查询本身不“动态”——它只在视口变化（resize）或页面加载时计算一次。真正的动态响应依赖浏览器对 resize 事件的触发精度，以及开发者是否避开了内联样式、JS 强制重排等干扰因素。