响应式设计通过link标签的media属性和CSS @media规则结合，实现按设备特性加载样式。使用link可条件加载外部文件，如移动端、打印和高清屏专用样式，减少无效资源请求；内部@media则在单文件中管理多断点规则，便于维护，适合中小项目；混合策略拆分关键与非关键样式，配合构建工具优化性能，提升用户体验。
响应式设计中，CSS媒体查询与不同引入方式结合使用，可以实现按设备特性加载特定样式，提升性能并优化用户体验。关键在于合理利用link标签的media属性和CSS内部@media规则，控制样式在何时生效。
通过link标签的media属性按条件加载CSS文件
使用link引入外部样式表时，可设置media属性，使浏览器仅在匹配设备条件时下载并应用该文件。
- 只在屏幕设备且最大宽度768px时加载移动端样式 <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
- 仅打印时应用打印专用样式 <link rel="stylesheet" href="print.css" media="print">
- 支持高分辨率屏幕时加载高清资源 <link rel="stylesheet" href="retina.css" media="screen and (-webkit-min-device-pixel-ratio: 2)">
这种方式的优势是：不满足条件时，浏览器可能延迟或跳过资源加载，减少带宽消耗。
在CSS文件内部使用@media定义响应式规则
将所有样式写入单个CSS文件，通过内部媒体查询划分不同断点下的样式规则。
立即学习“前端免费学习笔记（深入）”；
- 基础样式始终生效 body { font-size: 14px; }
- 平板及以上设备调整布局 @media (min-width: 769px) { .container { width: 750px; } }
- 桌面端进一步优化 @media (min-width: 1024px) { .sidebar { display: block; } }
这种方法便于维护，但所有样式都会被下载，适合中小型项目或需要快速切换样式的场景。
混合策略：拆分关键与非关键样式
结合外部引入与内部查询，实现性能与可维护性的平衡。
- 主样式文件包含通用规则和基础响应逻辑 <link rel="stylesheet" href="main.css">
- 异步加载非首屏所需的主题或组件样式 <link rel="stylesheet" href="theme-dark.css" media="(prefers-color-scheme: dark)">
- JavaScript动态插入特殊设备样式 // 检测触屏设备后加载触控优化样式 if ('ontouchstart' in window) { ... }
现代项目常配合构建工具，将不同断点的样式自动打包成多个文件，再通过link+media智能加载。
基本上就这些。根据项目规模和性能要求选择合适方式，既能保证适配效果，也能避免过度请求资源。
