媒体查询需移动优先，先写基础样式再用min-width递增断点；必加viewport meta标签；rem响应式推荐clamp()函数；打印样式禁用screen专属属性并简化布局。
media查询怎么写才不被桌面端覆盖
小屏幕样式没生效，大概率是媒体查询顺序或断点值写反了。CSS里后声明的规则会覆盖先声明的，所以移动端要放在桌面端前面，或者用 max-width 明确限定上限。
- 错误写法：
@media (min-width: 768px) { ... }放在最前，然后写默认样式——结果默认样式（其实是移动端）被后面的大屏规则覆盖 - 推荐结构：先写基础样式（移动优先），再用
@media (min-width: 768px)逐步增强，断点按768px、1024px、1200px递增 - 别混用
min-width和max-width在同一套逻辑里，容易互相干扰；统一用min-width更好维护
viewport meta 标签漏了会怎样
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，手机浏览器会按桌面宽度（通常是 980px）渲染页面，导致内容缩成一团，媒体查询根本不会触发。
- 这个标签必须放在
里，且不能被 JS 动态插入（多数浏览器只在初始解析时读取） -
initial-scale=1很关键，否则 iOS Safari 可能自动缩放，让320px宽度的设备实际渲染宽度变成 640px，断点失效 - 不要加
user-scalable=no——不仅影响可访问性，某些安卓 WebView 会因此忽略整个 viewport 声明
rem + media 查询组合时字体缩放异常
用 rem 做响应式字体时，如果根元素 font-size 是通过 JS 动态设置的，再叠加强制媒体查询，容易出现字体跳变或卡在某个尺寸不动。
- 纯 CSS 方案更稳：用
clamp(1rem, 2.5vw, 1.5rem)替代 JS 计算，现代浏览器支持良好 - 如果必须用 JS 控制
html.style.fontSize，记得监听resize和orientationchange，但别在scroll里调用 - 注意 Chrome 某些版本对
rem和媒体查询联动有渲染延迟，加transform: translateZ(0)可强制重绘（仅限必要时）
打印样式表里 media 查询失效
写 @media print { ... } 时发现样式没起作用，常见原因是用了 screen 专属属性（比如 cursor、transition），或被更高优先级的 @media screen 规则覆盖。
立即学习“前端免费学习笔记（深入）”；
- 打印样式应单独写，避免依赖屏幕断点；用
@media print and (min-width: 1px)确保兼容老浏览器 - 移除所有背景色（
background设为transparent）、隐藏非必要元素（display: none）、把链接补全 URL（用content: attr(href)） - 不要在
@media print里写width或flex布局——打印机引擎解析能力有限，优先用block+page-break-inside: avoid
响应式不是堆一堆媒体查询就完事，真正难的是判断哪些结构该随屏幕塌缩，哪些该隐藏，哪些必须保留语义顺序——这些没法靠 CSS 自动推导，得看内容本身是否经得起窄屏重排。
