做响应式网页时，大多数人第一反应是在CSS文件里写一堆@media规则，其实还有一种更直接的方式：在link标签上通过media属性指定样式文件的生效条件。浏览器会根据条件决定是否应用这份样式表，甚至在不满足条件时完全不下载它（部分老浏览器除外），这对页面性能和样式组织都有实际意义。本文就来详细讲解这种用法。
link标签media属性的基本语法
先看最基础的写法。HTML中的<link>元素用来引入外部资源，引入CSS时通常只写rel和href两个属性，但实际上它还支持media属性，用来声明这份样式表在什么条件下生效。例如：
<!-- 只在打印或打印预览时生效 --> <link rel="stylesheet" href="print.css" media="print"> <!-- 只在屏幕宽度不超过600px时生效 --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)"> <!-- 只在横屏时生效 --> <link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
media属性的值分为两类：一类是媒体类型，比如screen（屏幕）、print（打印）、all（所有设备，默认值）；另一类是媒体查询表达式，也就是媒体类型加上条件的组合，条件通常写在括号里，如(min-width: 768px)。两者可以用and连接，也可以用逗号表示"或者"的关系。写media="screen and (max-width: 600px)"的意思是：设备类型是屏幕，且视口宽度不超过600像素时，这份CSS才会被应用。
需要注意的是，当media条件不满足时，浏览器虽然不会应用这份样式，但现代浏览器通常仍会下载该文件（除非使用了不支持的查询特性）。所以不要指望用media属性来做"按需加载"的懒加载方案，它的核心价值在于语义化的样式拆分，而不是流量节省。真正想按需加载，还得配合JS动态插入link或者使用media切换技巧。
link的media属性与@import、style内嵌的对比
在CSS中应用媒体查询有三种常见方式，它们的适用场景并不相同。第一种就是本文主角——link标签加media属性；第二种是在CSS文件内部使用@import url(...) (条件)；第三种是在样式表里写@media规则块。三者的语法示例对比如下：
/* 方式一：写在link标签上（HTML文件中）
<link rel="stylesheet" href="wide.css" media="(min-width: 1200px)"> */
/* 方式二：CSS文件内使用@import */
@import url("wide.css") (min-width: 1200px);
/* 方式三：CSS文件内使用@media规则 */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}从性能角度看，@import是最不推荐的，因为它会阻塞CSS的并行下载——浏览器要先下载外层CSS文件，解析后才发现还有@import的文件，多了一次往返。link标签写法可以让浏览器在解析HTML时并行发现所有样式文件，加载效率更高。而@media规则块适合所有断点写在一个文件里的场景，适合中小项目，维护起来集中方便。
link加media的方式则更适合大型项目或团队协作：移动端样式和桌面端样式可以拆成独立文件，分别由不同的人维护，HTML结构上一目了然。举个实际例子，很多网站会单独引入一个打印样式表print.css，里面隐藏导航栏、去掉背景色、调整字号，专门为用户打印页面或另存为PDF时服务，这就是media属性最经典的用法之一。
完整的响应式布局实战示例
下面用一个三端适配的实际案例把知识点串起来。假设我们要做一个简单的卡片列表页面，手机单列、平板两列、桌面三列。HTML部分这样写：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 基础样式：所有设备共用 -->
<link rel="stylesheet" href="base.css">
<!-- 平板样式：宽度769px到1024px -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 769px) and (max-width: 1024px)">
<!-- 桌面样式：宽度大于1024px -->
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1025px)">
<!-- 打印样式 -->
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
<div class="card-list">
<div class="card">卡片一</div>
<div class="card">卡片二</div>
<div class="card">卡片三</div>
</div>
</body>
</html>三个样式文件中的核心内容分别如下。base.css负责基础布局和手机端的单列展示：
/* base.css：默认即手机端 */
.card-list {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
padding: 12px;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
}
/* tablet.css */
.card-list {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* desktop.css */
.card-list {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
/* print.css：打印时隐藏边框、使用黑白配色 */
.card {
border: none;
color: #000;
}这里有一个容易踩的坑要提醒：拆分成多个文件后，后引入的文件会覆盖先引入文件中的同名属性，所以tablet.css和desktop.css里只需要写差异部分，不用重复声明。另外，media属性中必须显式写screen时要注意条件覆盖区间不要重叠或留空，比如上面例子中769px到1024px、1025px以上，边界值对得上，不会出现某个宽度下两个文件同时生效或都不生效的情况。
使用中的注意事项与进阶技巧
首先是兼容性问题。media属性本身从HTML4时代就存在，所有浏览器都支持，但其中的查询特性有差异：比如prefers-color-scheme（深色模式检测）需要较新的浏览器才支持。如果用到了新特性，建议在CSS内部用@media规则做兜底，或者在JS里做特性检测。
其次是一个实用的进阶技巧——利用media属性做样式的异步加载。做法是先把link的media设成一个不会立即满足的条件，比如media="print" onload="this.media='all'"，这样浏览器会低优先级下载这份CSS，加载完成后通过onload把media改成all使其生效。这个技巧常用来异步加载非首屏关键CSS，减少首屏渲染阻塞：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="non-critical.css"> </noscript>
注意配套的noscript写法，如果用户禁用了JS，onload不会执行，就需要noscript里的常规引入来兜底。总的来说，link标签结合媒体查询是一种简单直接、浏览器兼容极好的样式组织方式，配合合理的断点设计和文件拆分策略，可以让响应式项目的样式结构更加清晰。对于小型项目，单文件加@media规则可能更省事；对于多端差异大、多人协作的项目，按media拆分文件的方案则更值得采用。根据实际场景选择合适的方案，才是关键。