link标签的media属性控制资源是否加载，不匹配时根本不会发起http请求；常见错误如缺括号、非法值或顺序错误会导致样式表被浏览器静默忽略。
media属性只能写在里，和![]()
上加了没用
浏览器只认media，完全被忽略——不是不生效，是压根不解析。常见错误包括：
-
media="max-width: 768px"（缺括号）→ 浏览器静默跳过该，连请求都不发 -
media="768px"或media="tablet"→ 非法媒体查询值，整条失效 写在 后面 → 浏览器直接终止扫描，所有
都被跳过，只加载 <img src>
断点顺序必须从宽到窄，否则小屏永远卡第一条
浏览器线性扫描media为true的就立即加载并停止判断。顺序错了，逻辑就崩了：
- ✅ 正确：
media="(min-width: 1200px)"→media="(min-width: 768px)"→media="(max-width: 767px)" - ❌ 错误：
media="(max-width: 767px)"放最前 → 所有手机、平板、甚至部分桌面缩放窗口都会命中它，宽屏图根本不会加载 - ⚠️ 边界重叠风险：
(min-width: 768px)和(max-width: 768px)并存时，768px宽度固定命中前者，行为不可控
media和srcset/sizes不是一回事，别混着配
media决定“用哪一组图”（比如横图 vs 竖图），srcset+sizes决定“这组里选哪个分辨率版本”。它们职责分明，但容易踩坑：
-
srcset写在里时，只响应设备像素比（ 2x）；要适配不同视口宽度下的渲染尺寸，必须靠sizes，而sizes只能写在上
- 同一
srcset中混用400w和2x→ 浏览器解析失败，直接fallback到<img src> -
sizes漏写或语法错（如单位缺失、逗号遗漏）→ 浏览器按默认100vw计算，小屏也可能加载大图
验证是否生效，别信预览，看Network面板
很多“没切换”的问题，其实只是图片路径404、media语法错得隐蔽，或者服务器返回了错误MIME类型（比如.jpg返回text/html）。最可靠的方式是：
- 打开 DevTools 的 Network 面板
- 清空缓存后硬刷新（Ctrl+Shift+R 或 Cmd+Shift+R）
- 观察最终发起的图片请求地址，确认是哪个
srcset项或<img src>被加载
特别注意：<img>不是可选项，是强制兜底节点——漏掉src或alt，或写成<img>自闭合，会导致图片区域空白，旧版 Safari 还可能完全不触发加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
