可通过 <link> 标签的 media 属性实现条件加载 CSS，匹配时下载并应用，不匹配时（如 media="print"）通常不下载以节省带宽；推荐显式声明互斥断点（如 max-width: 767px 与 min-width: 768px），避免重叠与冲突。
可以通过 <link> 标签的 media 属性配合媒体查询，实现按条件加载 CSS 文件，从而只在满足特定设备或视口条件时下载并应用对应样式表。
使用 media 属性控制 CSS 加载时机
media 属性不仅决定样式是否生效，还影响浏览器是否下载该 CSS 文件（现代浏览器大多支持“惰性加载”）。
- 当
media值为不匹配当前环境的媒体查询（如media="print"在屏幕浏览时），浏览器通常不会下载该 CSS，节省带宽 - 写成
media="all"或省略media，则始终下载并解析 - 推荐显式声明，例如：
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 769px)">
避免重复加载与样式冲突
多个 <link> 使用互斥媒体查询时，浏览器只加载匹配的一份；但需注意：
- 媒体查询范围不能重叠（如
max-width: 768px和min-width: 768px在 768px 宽度下会同时命中），建议用max-width: 767px和min-width: 768px明确切分 - 不依赖
media完全阻止加载？可搭配rel="preload"+onload动态注入，实现更精细控制（进阶场景）
结合 @import 要谨慎
@import 写在 CSS 文件中也能加媒体查询，但存在明显缺点：
立即学习“前端免费学习笔记（深入）”；
- 无论媒体条件是否满足，主 CSS 文件仍会被下载，
@import的资源还会额外发起请求 - 阻塞渲染，且无法被多数 CDN 或构建工具有效拆包优化
- 应优先使用 HTML 中的
<link media="...">，而非 CSS 内的@import
响应式断点建议与维护
媒体查询条件应围绕真实设计需求设定，而非设备型号：
- 常用断点参考：
(max-width: 575px)（超小屏）、(min-width: 576px)（手机横屏/小平板）、(min-width: 768px)（平板）、(min-width: 992px)（桌面）、(min-width: 1200px)（大桌面） - 将断点变量统一定义在构建工具（如 Sass 变量、CSS 自定义属性）中，便于全局调整
- 测试时用浏览器开发者工具的“设备模拟”+ 手动缩放，验证加载行为和样式表现是否符合预期
