通过link标签的media属性可实现按设备条件加载CSS文件，如仅在小屏时加载mobile.css，结合多个link标签可实现响应式布局，基础样式始终加载，其他按需引入，提升性能；需注意旧浏览器兼容性、非匹配资源仍可能下载等问题，推荐关键样式内联或合并，合理使用可优化多设备体验。
通过 link 标签实现多媒体查询样式加载，主要是利用其 media 属性来控制不同设备或屏幕条件下加载特定的 CSS 文件。这种方式可以让页面在不同设备上呈现更合适的布局和样式，同时避免加载不必要的资源。
使用 media 属性按设备条件加载样式
在 link 标签中设置 media 属性，可以指定该样式表仅在满足特定媒体查询条件时加载。浏览器会根据当前设备环境判断是否应用该 CSS 文件。
常见用法包括：-
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
：只在屏幕宽度小于等于 768px 时加载 mobile.css -
<link rel="stylesheet" href="print.css" media="print">
：仅在打印页面时加载 print.css -
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1024px)">
：宽屏设备加载 desktop.css -
<link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">
：用户系统为深色主题时加载
多个 link 标签配合实现响应式加载
你可以为不同场景准备多个 CSS 文件，并通过多个 link 标签分别引入。浏览器只会加载当前匹配的样式表，未匹配的文件可能延迟加载或不应用。
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
<link rel="stylesheet" href="base.css"><link rel="stylesheet" href="tablet.css" media="screen and (min-width: 769px) and (max-width: 1023px)"><link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1024px)"><link rel="stylesheet" href="printer.css" media="print">
这样 base.css 始终加载，其他样式按需启用，提升性能与用户体验。
注意点与最佳实践
虽然 media 可以控制加载时机，但要注意以下几点：
- 某些旧版浏览器可能不完全支持复杂的媒体查询
- 即使 media 不匹配，CSS 文件仍可能被下载（只是不渲染），所以不要依赖 media 完全阻止加载
- 如果希望彻底延迟加载大文件，可结合 JavaScript 动态插入 link 标签
- 推荐将基础样式内联或合并，避免关键样式受加载顺序影响
基本上就这些。合理使用 link 的 media 属性，能有效实现按设备特性加载对应样式，是构建响应式网页的实用手段之一。
