media属性对网络类型完全无效，因其仅在HTML解析时匹配CSS媒体查询语法（如screen and (min-width:768px)），不读取navigator.onLine或NetworkInformation.effectiveType；语法如(connection:4g)不存在于规范中，浏览器直接忽略并退化为all。
link 标签本身不感知网络环境（如 2G/3G/4G/WiFi），无法自动根据网速切换 CSS；所谓“网络自适应加载”，必须靠 JS 主动判断 + 动态创建 <link> 实现，media 属性只响应设备特性，不响应 navigator.onLine 或 NetworkInformation.effectiveType。
为什么 media 属性对网络类型完全无效
media 属性只在 HTML 解析阶段匹配 CSS 媒体查询语法（如 screen and (min-width: 768px)），它根本不读取浏览器的网络状态 API。即使你写 media="screen and (connection: 4g)"，这个语法根本不存在于 CSS 媒体规范中——浏览器会直接忽略 media 值，退化为 all，导致所有设备都下载该 CSS。
常见错误现象：
- 把
media="(prefers-reduced-data: reduce)"误当成网络类型判断——它只响应系统级“节省数据”开关，和实际带宽无关 - 在
<link rel="preload">上滥用media，以为能控制 JS/CSS 预加载时机——但rel="preload"完全忽略media属性 - 期望 Chrome DevTools 的 “Throttling” 模式能触发
media切换——不会，它只影响资源加载速度，不改变媒体查询匹配结果
真正在不同网络下切换样式：用 NetworkInformation + 动态 <link>
现代浏览器支持 navigator.connection.effectiveType（返回 slow-2g / 2g / 3g / 4g），配合 matchMedia 可组合出真正按需加载的逻辑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
const link = document.createElement('link');
link.rel = 'stylesheet';
if (navigator.connection && navigator.connection.effectiveType) {
link.href = navigator.connection.effectiveType.includes('2g')
? 'light.css'
: 'full.css';
} else {
// 降级：无 API 支持时走默认
link.href = 'full.css';
}
document.head.appendChild(link);
关键注意点：
- 必须在
<head>内执行，且最好在<title>后立即插入，避免 FOUC - 不能只改已有
<link>的href——浏览器不会重新 fetch，必须remove()旧节点再appendChild()新节点 -
navigator.connection在部分 iOS Safari 版本中不可用或返回undefined，需加if守卫
更稳妥的降级方案：结合服务端 User-Agent 和客户端 JS
纯前端判断有局限，真实项目中建议双保险：
- 服务端根据
User-Agent和已知设备能力，输出初始<link media="all" href="light.css">（针对低端机型） - 客户端 JS 立即检查
navigator.connection，若发现是 WiFi 或 4G，则动态加载full.css并移除light.css - 对关键样式（如字体、基础排版）仍保留在
<style>内联中，避免首屏白屏
容易被忽略的一点：light.css 不等于“删减版 full.css”，而是应重写选择器——比如把 background-image: url(big-bg.jpg) 替换为纯色背景，否则即使 CSS 文件小，里面的图片 URL 仍会被解析并发起请求。
