CSS媒体查询无法感知网络状态，仅响应视口尺寸等静态条件；prefers-reduced-data依赖用户手动设置、iOS Safari不支持、对<img>无效，故不可靠；真正可行的是sizes+srcset+JavaScript检测navigator.connection.effectiveType并动态设置图片资源。
单纯用 media 属性无法根据网络情况（如 2G/3G/4G/WiFi）动态加载大图——CSS 媒体查询不感知网络状态，只响应视口尺寸、设备特性等静态条件。
为什么 media="(prefers-reduced-data: reduce)" 不是可靠方案
这个媒体特性在部分 Chrome 和 Safari 中支持，但存在严重限制：
- 它依赖用户手动开启「减少数据用量」系统设置，不是自动检测网络类型或带宽
- iOS Safari 完全不支持
prefers-reduced-data - 即使匹配，它也只适用于 CSS 资源（如背景图），对
<img>标签无效 - 无法区分「弱网但用户没开设置」和「强网但用户误开了设置」
真正可行的 fallback 组合：sizes + srcset + JavaScript 检测
要让大图在移动端按网络情况降级，必须跳出纯 CSS 思路，用 HTML + JS 协同：
-
sizes控制响应式布局下图片占位宽度（影响浏览器选源逻辑） -
srcset提供多分辨率素材（1x,2x,1024w,1600w等） - JavaScript 读取
navigator.connection.effectiveType（如'slow-2g','4g'）并动态设置<img>的src或srcset - 注意 fallback：Safari 旧版不支持
navigator.connection，需用navigator.onLine+ 定时请求测速兜底
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
<img id="hero-img" src="hero-400.jpg"
srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1200.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw">
JS 中可这样干预：
const img = document.getElementById('hero-img');
if ('connection' in navigator && navigator.connection.effectiveType) {
if (navigator.connection.effectiveType.includes('2g') ||
navigator.connection.effectiveType === 'slow-2g') {
img.src = 'hero-400.jpg';
}
}
background-image 场景下能用 media 吗？有限可用
如果大图是 CSS background-image，且你只关心「设备像素比」或「视口宽度」，@media 是有效的：
- 用
@media (-webkit-min-device-pixel-ratio: 2)或@media (min-resolution: 192dpi)加载 @2x 背景图 - 用
@media (max-width: 768px)切换为压缩版背景图（如更小尺寸、更低质量 JPEG） - 但注意：iOS Safari 对
min-resolution支持不稳定，建议优先用device-pixel-ratio前缀写法 - 别试图在
media里混用网络判断，比如and (prefers-reduced-data: reduce)—— 实际覆盖率极低，不如 JS 主动控制
真正难的是弱网下的首屏体验：CSS 媒体查询不阻塞渲染，但 JS 注入图片可能引发 FOUC 或布局偏移。最稳妥的做法是服务端根据 UA + IP 地理位置预判网络类型，再下发对应资源链接——客户端方案永远只是 fallback。
