通过link标签结合媒体查询可实现响应式设计，根据设备特性加载不同CSS文件，如按屏幕宽度、打印场景、分辨率和横屏方向分别引入样式，支持多条件适配移动端、平板和桌面端；需注意未匹配的样式表仍可能产生请求开销，建议优先使用内部@media查询以减少HTTP请求，必要时配合rel="preload"预加载关键资源。
通过 link 标签结合媒体查询引入 CSS，可以让你根据设备特性（如屏幕宽度、分辨率、设备方向等）加载不同的样式文件。这种方法有助于实现响应式设计和优化不同设备的显示效果。
使用 media 属性指定查询条件
在 link 标签中加入 media 属性，可以定义何时应用该 CSS 文件。浏览器会根据媒体查询的结果决定是否加载并应用该样式表。
常见用法包括：
- 按屏幕宽度切换样式：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"> - 仅在打印时使用：
<link rel="stylesheet" href="print.css" media="print"> - 针对高分辨率屏幕（Retina）：
<link rel="stylesheet" href="high-res.css" media="screen and (-webkit-min-device-pixel-ratio: 2)"> - 横屏设备专用样式：
<link rel="stylesheet" href="landscape.css" media="screen and (orientation: landscape)">
多个 link 标签实现多条件加载
你可以同时引入多个 CSS 文件，每个对应不同的设备场景。浏览器只会应用符合当前环境的样式表，未匹配的文件仍可能下载，但不会渲染。
立即学习“前端免费学习笔记（深入）”；
示例：为不同屏幕尺寸分别引入样式
<link rel="stylesheet" href="small.css" media="screen and (max-width: 480px)"><br> <link rel="stylesheet" href="medium.css" media="screen and (min-width: 481px) and (max-width: 1024px)"><br> <link rel="stylesheet" href="large.css" media="screen and (min-width: 1025px)">
这样能确保移动端、平板和桌面端分别使用最合适的样式规则。
注意事项与性能建议
虽然这种写法灵活，但也需注意以下几点：
- 带 media 的 link 标签即使不匹配也会下载 CSS 文件（现代浏览器已优化，但仍有请求开销）
- 避免使用过于复杂的媒体查询组合，影响可维护性
- 优先考虑使用 CSS 内部的 @media 查询做响应式布局，减少 HTTP 请求
- 如果必须外链，可结合 rel="preload" 预加载关键样式
基本上就这些。合理利用 link 标签的 media 属性，能帮你更好地控制不同设备下的样式加载逻辑，提升用户体验。
