媒体查询应直接写在CSS文件里最稳妥，HTML中用带media属性会触发额外HTTP请求、影响渲染阻塞且无法细粒度控制；CSS内联@media支持嵌套、变量和维护。
媒体查询写在 CSS 文件里还是 HTML 里？
直接写在 CSS 文件里最稳妥。HTML 中用 <link> 标签带 media 属性也能加载，但会触发额外 HTTP 请求、影响渲染阻塞，且无法做细粒度控制。CSS 内联媒体查询（@media）支持嵌套规则、可复用变量、便于维护。
@media 查询的常见断点怎么写才不踩坑？
别硬编码像素值，优先用语义化断点：比如针对「小屏手机竖屏」用 @media (max-width: 480px)，但更推荐基于内容而非设备——比如当导航栏换行时才切样式，那就测实际容器宽度，而不是猜 iPhone 尺寸。另外注意：
-
min-width比max-width更易维护（移动优先），避免层叠冲突 - 不要混用
em和px断点，浏览器缩放时行为不一致 -
width查的是视口宽度，不是设备物理宽度，跟device-width不同
多个 @media 查询会重复计算吗？性能有影响吗？
不会重复计算。浏览器只在视口尺寸变化（resize）、设备方向切换或页面首次渲染时评估 @media 条件。但要注意：
- 每个
@media块内的选择器仍参与全局 CSSOM 构建，过度拆分（比如每个组件都包一层@media）会增加解析开销 - 避免在
@media里写高复杂度选择器，如div:nth-child(3n+1) .card > p:last-of-type - 动画中频繁触发布局（layout）时，若媒体查询导致样式重算，可能掉帧——这种场景建议用 JS 监听
matchMedia主动控制
如何让媒体查询生效但不干扰 SSR 或打印样式？
关键在媒体类型（type）和状态组合。比如：
立即学习“前端免费学习笔记（深入）”；
- 屏幕响应式用
@media screen and (min-width: 768px)，明确限定为屏幕设备 - 打印样式用
@media print，它会自动忽略所有screen查询下的规则 - 避免写成
@media all and (min-width: ...)，all会让规则在所有媒介下都参与匹配，包括打印预览 - 暗色模式检测要加
prefers-color-scheme，不能只靠宽高判断
最常被忽略的是：开发时用 Chrome DevTools 的设备模拟器测试，但那个只是改了 viewport 宽度，并不会触发 prefers-reduced-motion 或 hover 等交互特性，真机测试不可跳过。
