通过结合CSS引入方式与媒体查询，可提升响应式设计性能。1. 使用link标签的media属性按条件加载外部样式表，实现精准资源投放；2. 在单个CSS文件中使用内部媒体查询，便于维护并支持移动优先策略；3. 结合JavaScript动态加载样式，避免低性能设备下载冗余资源；4. 遵循移动端优先、拆分关键CSS、慎用@import及结合preload等最佳实践，优化加载效率与用户体验。
在响应式设计中，CSS 的引入方式与媒体查询的结合使用，能有效提升页面性能并优化不同设备的显示效果。通过条件加载，可以让特定样式的 CSS 文件或规则只在满足某些条件（如屏幕尺寸、设备类型）时才被加载或应用，避免资源浪费。
1. link 标签中的 media 属性：按条件加载外部样式表
使用 <link> 标签引入外部 CSS 时，可以通过 media 属性指定该样式表仅在匹配特定媒体条件时生效。这有助于实现按设备类型分文件加载，减少不必要的解析开销。
例如：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"><link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)">
<link rel="stylesheet" href="print.css" media="print">
这样，移动设备只会应用 mobile.css，大屏设备加载 desktop.css，而打印时自动切换到 print.css，实现资源的精准投放。
立即学习“前端免费学习笔记（深入）”；
2. CSS 内部媒体查询：单文件响应式控制
将所有样式集中在一个 CSS 文件中，利用媒体查询在内部划分不同设备的样式规则。这种方式便于维护，适合中小型项目。
示例：
/* 默认样式（移动端优先） */
.container { padding: 10px; }
@media screen and (min-width: 769px) {
.container { width: 750px; margin: 0 auto; }
}
@media screen and (min-width: 1200px) {
.container { width: 1170px; }
}
这种写法配合移动优先策略，确保小屏设备加载最简样式，大屏逐步增强布局，提升加载效率。
3. 动态加载与 JavaScript 配合实现智能引入
对于大型项目，可结合 JavaScript 检测设备特性，动态插入带有 media 条件的 <link>，实现更精细的控制。
例如，仅在平板以上设备加载高分辨率图片样式：
if (window.matchMedia("(min-width: 769px)").matches) {const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "high-res.css";
document.head.appendChild(link);
}
这种方式避免了低性能设备下载不必要的资源，提升首屏加载速度。
4. 响应式设计中的最佳实践建议
合理选择引入方式，能显著提升用户体验：
- 移动端优先：默认样式针对小屏设计，通过
min-width逐步扩展 - 拆分关键与非关键 CSS：首屏关键样式内联，其余异步加载
- 慎用 @import：它会阻塞渲染，不利于性能优化
- 结合 preload 与 media：预加载可能用到的样式，提升切换体验
基本上就这些。灵活运用 link 的 media 属性与 CSS 媒体查询，能让响应式设计更高效、更可控。
