小屏背景图未生效是因为CSS优先级错误或viewport缺失；需将通用样式置前、媒体查询置后，并确保声明正确，统一使用min-width或max-width断点，避免路径重复加载。
用 @media 切换背景图时，为什么小屏没生效？
常见现象是写了 @media (max-width: 768px)，但手机上看还是大屏背景——根本原因是 CSS 优先级或媒体查询条件没匹配上。浏览器按顺序解析样式，后写的规则会覆盖前面的；如果基础背景写在媒体查询后面，它就会一直生效。
- 把通用背景（如桌面端）写在最前面，
@media规则写在它之后 - 检查视口是否声明：
<meta name="viewport" content="width=device-width, initial-scale=1">缺了这句，移动端根本不会触发max-width查询 - 用 Chrome DevTools 的「Toggle device toolbar」刷新测试，别只靠缩放窗口模拟
-
min-width和max-width别混用：同一套逻辑统一用min-width（移动优先）或统一用max-width（桌面优先），否则容易漏掉中间断点
background-image 路径在不同媒体查询里怎么写才不重复请求？
很多人以为每个 @media 里写一遍 background-image: url(...) 就完事了，其实浏览器可能提前加载所有 url()，哪怕当前没匹配到。这不是 bug，而是预加载优化行为。
- 用不同文件名区分资源，比如
bg-desktop.jpg、bg-mobile.jpg，避免缓存混淆 - 关键场景下（如首屏大图），优先用
picture+img标签替代 CSS 背景，能真正按需加载 - 如果必须用 CSS 背景，可配合
prefers-reduced-motion或prefers-color-scheme做二次控制，但别指望它减少请求数
background-size 和 background-position 在响应式里怎么配才不拉伸变形？
直接写 background-size: cover 看似省事，但不同屏幕宽高比下，关键内容可能被裁掉。尤其文字叠加在背景上时，经常发现标题突然“消失”在边缘。
- 优先用
background-size: 100% auto或auto 100%控制单向拉伸，再配合background-position锚定主体区域（比如center top） - 对 banner 类背景，加一层伪元素（
::before）承载图片，主容器只负责定位和遮罩，更易控制层级和尺寸 - 慎用
background-attachment: fixed—— 在 iOS Safari 和部分安卓 WebView 里会导致背景错位或性能卡顿
要不要用 CSS 自定义属性（--bg-url）管理多端背景？
可以，但得看项目规模。小项目硬写 @media 更直观；中大型项目用 CSS 变量能减少重复，不过要注意兼容性。
立即学习“前端免费学习笔记（深入）”；
- 变量本身不触发响应式，必须结合
@media动态赋值：:root { --bg-url: url(desktop.jpg); } @media (max-width: 768px) { :root { --bg-url: url(mobile.jpg); } } - IE 完全不支持 CSS 变量，如果还要兼容，老老实实用传统写法
- 构建工具（如 PostCSS）能自动展开变量，但调试时 DevTools 显示的是最终值，看不到变量来源，排查路径问题会变慢
真正在意加载性能或内容安全（比如 CMS 动态吐背景路径），背景图最好交给 JS 控制，CSS 只管样式逻辑。毕竟媒体查询只是“视觉开关”，不是资源调度器。
