通过link标签的media属性可按屏幕条件加载CSS，如小屏用mobile.css、大屏用desktop.css、打印时加载print.css，并支持高分辨率屏幕优化；结合rel="preload"可预加载特定媒体条件下的资源，提升性能与用户体验。
通过 link 标签结合媒体查询（media attribute），可以控制不同屏幕条件下加载特定的 CSS 文件。这在响应式设计中非常实用，能提升性能并优化用户体验。
使用 media 属性按屏幕条件加载 CSS
在 link 标签中添加 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"> - 针对高分辨率屏幕加载优化样式：
<link rel="stylesheet" href="high-res.css" media="screen and (-webkit-min-device-pixel-ratio: 2)">
预加载关键资源（配合媒体条件）
如果某些 CSS 只在特定屏幕下需要，可结合 rel="preload" 提前加载，但延迟解析。
示例：只在宽屏预加载桌面样式<link rel="preload" href="desktop.css" as="style" media="screen and (min-width: 1024px)">
这样浏览器会提前下载 desktop.css，但不会立即应用，直到匹配 media 条件。
立即学习“前端免费学习笔记（深入）”；
实际应用建议
这种机制适合拆分样式以减少小屏设备的加载负担。
操作提示：- 将基础样式内联或放在主样式表中，确保页面基本可用
- 把大尺寸布局、复杂组件的样式分离到 desktop.css
- 测试不同设备宽度下的加载行为，确认预期文件被正确加载
- 注意：不满足 media 条件的 CSS 不会阻塞渲染，有利于性能
