link标签的media属性支持完整媒体查询语法，如“(min-width: 768px)”“print”“(prefers-color-scheme: dark)”，括号、空格必须规范，浏览器据此静态匹配并仅下载符合条件的CSS文件。
link标签的media属性到底能填什么值
media属性不是只能写 screen 或 print，它支持完整的媒体查询语法，和CSS里的 @media 规则基本一致。浏览器会根据当前视口、设备特性实时判断是否加载对应CSS文件。
常见可用值包括：all（默认）、screen、print，以及带条件的表达式，比如：(min-width: 768px)、(max-width: 480px)、(prefers-color-scheme: dark)、(hover: hover)。
注意：括号必须完整，空格不能省，min-width:768px（缺空格）或 (min-width:768px)（冒号后没空格）都会被忽略——浏览器不报错，但CSS根本不会加载。
多个link标签按media条件加载CSS的实际写法
把不同断点的样式拆成独立文件，用多个 <link> 并列声明，靠 media 控制触发时机。浏览器只下载并解析匹配当前环境的那几个，其余跳过（注意：不是“禁用”，是压根不 fetch）。
立即学习“前端免费学习笔记（深入）”；
示例：
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="tablet.css" media="(min-width: 768px)"> <link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)"> <link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">
关键点：
-
base.css无media，始终加载，应包含通用重置和移动优先基础样式 - 后续
media是“最小匹配”，tablet.css在 768px 及以上都生效，desktop.css在 1024px 及以上也生效，二者可能同时加载——需确保样式不冲突 - 像
prefers-color-scheme这类动态媒体特性，切换系统主题时，浏览器会自动加载/卸载对应CSS（前提是该link已存在于DOM中）
为什么CSS没生效？检查这三处硬伤
响应式CSS没反应，大概率不是逻辑问题，而是加载环节卡住了。
常见原因：
-
media值写在了rel或href位置，比如：<link rel="stylesheet" media="screen" href="style.css">写成了<link rel="stylesheet media='screen'" href="style.css">—— 属性名拼错，整个属性被忽略 - 使用了不被支持的媒体特性，比如老版Safari不认
(inverted-colors: inverted)，写了等于白写 - CSS文件本身有语法错误（如漏了
}），导致整张表失效；但浏览器不会提示“link加载失败”，只会静默跳过规则 - 忘了加
rel="stylesheet"—— 没这个属性，浏览器根本不当它是样式表，media再对也没用
移动端适配中容易被忽略的viewport元标签联动
<link media> 的宽度判断，依赖页面的视口宽度。如果没设 <meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 会以 980px 宽度渲染，所有 (max-width: 480px) 类规则全部失效。
也就是说，media="(max-width: 480px)" 加载的CSS，实际触发条件是“视口宽度 ≤ 480px”，而不是“设备物理宽度”。这个视口宽度由 viewport 元标签决定。
务必确认两者配合：
- 先有
<meta>设置合理视口 - 再用
<link media>按逻辑断点加载 - 调试时用浏览器设备模拟器看“Responsive”下的 “Viewport width” 数值，别只看设备型号
真机上，横竖屏切换会改变视口宽度，media 条件随之重新评估——这点比JS监听 resize 更轻量，但也更隐性，容易漏测。
