<link>标签通过media属性按设备条件加载CSS，如屏幕宽度、分辨率、设备类型等，实现响应式设计与性能优化。

在网页开发中，<link> 标签用于引入外部资源，比如CSS样式表。结合 media 属性，可以实现根据设备特性（如屏幕宽度、分辨率、设备类型等）有条件地加载不同的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">

上面代码的含义：

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 当屏幕宽度 ≤ 768px 时，加载 mobile.css
• 当屏幕宽度 ≥ 769px 时，加载 desktop.css
• 打印页面时，使用 print.css 样式

支持多种设备场景的 media 查询

media 属性支持丰富的媒体查询表达式，可用于更精细的控制：

<link rel="stylesheet" href="high-res.css" media="screen and (min-resolution: 2dppx)">
<link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="landscape.css" media="screen and (orientation: landscape)">

这些例子分别针对：

• 高像素密度屏幕（如Retina屏）
• 用户系统启用了暗黑模式
• 设备处于横屏状态

实际应用建议

虽然可以用多个带 media 的 link 标签实现响应式引入，但现代响应式设计更多采用单个CSS文件内使用 @media 查询 来组织样式，这样更便于维护。

但在以下情况，分开引入仍有优势：

• 移动端和桌面端样式差异极大，拆分可减少资源体积
• 某些设备专用样式（如打印）不需要在主CSS中包含
• 需要极致优化首屏加载速度时，按需加载关键样式

基本上就这些。合理使用 <link> 和 media 属性，可以在不牺牲体验的前提下提升页面性能。