通过link标签的media属性可实现按设备条件加载CSS文件，如仅在小屏时加载mobile.css，结合多个link标签可实现响应式布局，基础样式始终加载，其他按需引入，提升性能；需注意旧浏览器兼容性、非匹配资源仍可能下载等问题，推荐关键样式内联或合并，合理使用可优化多设备体验。
通过 link 标签实现多媒体查询样式加载，主要是利用其 media 属性来控制不同设备或屏幕条件下加载特定的 CSS 文件。这种方式可以让页面在不同设备上呈现更合适的布局和样式，同时避免加载不必要的资源。
使用 media 属性按设备条件加载样式
在 link 标签中设置 media 属性，可以指定该样式表仅在满足特定媒体查询条件时加载。浏览器会根据当前设备环境判断是否应用该 CSS 文件。
常见用法包括：- ：只在屏幕宽度小于等于 768px 时加载 mobile.css
- ：仅在打印页面时加载 print.css
- ：宽屏设备加载 desktop.css
- ：用户系统为深色主题时加载
多个 link 标签配合实现响应式加载
你可以为不同场景准备多个 CSS 文件，并通过多个 link 标签分别引入。浏览器只会加载当前匹配的样式表，未匹配的文件可能延迟加载或不应用。
示例：
这样 base.css 始终加载，其他样式按需启用，提升性能与用户体验。
注意点与最佳实践
虽然 media 可以控制加载时机，但要注意以下几点：
- 某些旧版浏览器可能不完全支持复杂的媒体查询
- 即使 media 不匹配，CSS 文件仍可能被下载（只是不渲染），所以不要依赖 media 完全阻止加载
- 如果希望彻底延迟加载大文件，可结合 JavaScript 动态插入 link 标签
- 推荐将基础样式内联或合并，避免关键样式受加载顺序影响
