prefers-reduced-data 不是标准 CSS 媒体特性，截至 2026 年 5 月未被任何主流浏览器实现；实际可用的省流策略包括利用 Save-Data 请求头、navigator.connection.saveData、prefers-reduced-motion 隐式降载，以及通过 <picture>、lazy loading 和按需加载第三方脚本等确定性手段优化资源交付。
prefers-reduced-data 不是标准 CSS 媒体特性
目前（截至 2026 年 5 月），prefers-reduced-data: reduce 未被任何主流浏览器实现或标准化。它出现在部分草案、实验性提案或误传资料中，但 Chrome、Firefox、Safari、Edge 均不识别该查询，window.matchMedia('(prefers-reduced-data: reduce)') 永远返回 matches: false，且不会触发样式生效。
实际可用的省流替代方案有哪些
虽然没有原生 prefers-reduced-data，但可通过组合已有机制达成类似目标：
- 用
prefers-reduced-motion: reduce隐式降低带宽压力：禁用 GIF、Lottie、CSS 动画后，自动减少帧更新和资源轮询 - 结合
Save-Data请求头（由浏览器在开启“省流量模式”时自动发送）：服务端可据此返回低分辨率图、跳过 WebP/AVIF、关闭预加载等；前端 JS 可通过navigator.connection.saveData读取（Chrome/Edge 支持，Firefox 已弃用，Safari 不支持） - 用
prefers-color-scheme: dark+prefers-contrast: high间接减少渲染开销：深色模式常伴随更低背光，高对比模式常关闭渐变/阴影，客观上降低 GPU 负载与功耗
为什么不能用 max-width 或 dpr 模拟省流设备
这类代理指标容易误判：
-
max-width: 480px匹配的是小屏，不是低带宽——很多旗舰手机屏幕小但 5G 下载飞快 -
devicePixelRatio >= 2表示高清屏，反而更可能需要更高清图，与省流目标相反 - 单纯检测网络类型（如
navigator.connection.effectiveType）不稳定：WiFi 下可能报slow-2g，4G 下可能报4g，且该 API 在 iframe 或隐私模式下常被限制
真正能落地的前端省流策略
不依赖未实现特性，优先做确定性控制：
立即学习“前端免费学习笔记（深入）”；
- 首屏图片强制用
fetchpriority="high"，非首屏用loading="lazy"，并为img设置width/height或aspect-ratio防 CLS - 用
<picture>+srcset提供多级分辨率，搭配imagesizes让浏览器按视口选最适尺寸，避免下载大图再缩放 - 动画类组件（如轮播、骨架屏）统一加
data-reduced-motion属性，在 JS 中监听matchMedia('(prefers-reduced-motion: reduce)')后切换状态 - 所有第三方脚本（统计、广告、视频播放器）延迟加载，且仅在用户交互或滚动进入视口后才初始化
真正关键的不是猜用户有没有开“省流”，而是默认按最小必要资源交付，把高成本行为（高清图、自动播放、后台轮询）设为 opt-in 而非 opt-out。
