如何通过媒体查询优化CSS，提升响应式网页加载效率？

本文共计1007个文字，预计阅读时间需要5分钟。

浏览器中的 `@media 查询仅针对条件渲染规则，它不会阻止CSS文件的下载。例如，你将样式写入 `@media (max-width: 480px) { ... }` 中，整份CSS文件仍然会在页面初始加载时被请求、解析和构建CSSOM。这是最常见的误解之一。

真正能实现「按需加载」的，是HTML层面的资源分发逻辑，不是CSS内部的媒体查询。

• <link rel="stylesheet"> 标签加 media 属性，可让浏览器延迟加载非匹配媒体的样式表（如 media="print" 或 media="(min-width: 768px)"）
• 现代浏览器对 media 属性值为不匹配当前环境的 <link>，会将其设为 disabled 状态，跳过解析，但**仍会发起HTTP请求**（除非用 onload + remove() 手动清理）
• 若想彻底避免请求，必须用JS动态插入 <link>，或服务端根据UA/屏幕宽度做条件渲染

用 media 属性做轻量级分流

适合多终端共用一套构建流程、不想改打包逻辑的场景。关键在把「大而全」的响应式CSS拆成语义明确的几份，并用 media 控制初始加载时机。