不能。link的media属性仅控制样式是否应用，浏览器仍会下载CSS文件，导致移动端首屏性能受损；真正按需加载需用JavaScript动态插入或服务端检测。
移动端 CSS 文件能否用 <link> 配合媒体查询单独加载？
不能。HTML 的 <link media="..."> 中的 media 属性只控制该资源是否「应用样式」，但浏览器仍会下载它（除非是 print 等部分类型在某些浏览器中可能延迟或跳过）。这意味着即使你写 <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">，桌面端访问时 mobile.css 依然大概率被下载，造成冗余请求和带宽浪费。
media 属性的实际行为与常见误解
很多人以为 media 是“条件加载”，其实它是“条件应用”：资源仍会发起 HTTP 请求，只是解析后若媒体查询不匹配，就不会将其中的规则注入渲染树。这在移动端首屏性能敏感场景下尤其不利。
- Chrome、Firefox、Safari 均会在
DOMContentLoaded前预加载所有<link rel="stylesheet">，无论media是否匹配 -
media="print"是少数可能被延迟加载的例外，但不可靠，且不适用于屏幕适配 - 使用
media="(min-width: 900px)"加载桌面样式，在手机上仍会下载——只是不生效
真正按需加载移动端 CSS 的可行方式
要实现「只在移动设备上下载 mobile.css」，必须绕过预加载机制，用 JavaScript 动态插入 <link>，并配合用户代理或 window.matchMedia 判断。
<script>
if (/Mobi|Android/i.test(navigator.userAgent)) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'mobile.css';
document.head.appendChild(link);
}
</script>
更健壮的做法（推荐）：
立即学习“前端免费学习笔记（深入）”；
<script>
const mql = window.matchMedia('(max-width: 768px)');
if (mql.matches) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'mobile.css';
document.head.appendChild(link);
}
// 可选：监听变化（如横竖屏切换）
mql.addListener((e) => {
if (e.matches) {
// 插入 mobile.css
} else {
// 移除 mobile.css 或插入 desktop.css
}
});
</script>
- 注意：动态插入的 CSS 不会阻塞 HTML 解析，但会影响后续渲染，建议放在
<head>底部或DOMContentLoaded后执行 - 服务端检测（如通过 User-Agent 响应不同 HTML）是最彻底的方案，但需要后端配合
- 现代项目更倾向用单一响应式 CSS +
@media规则，而非拆文件——避免请求开销，也减少维护碎片
为什么多数项目不该拆移动端 CSS 文件？
拆成 mobile.css + desktop.css 看似清晰，实际带来明显负担：
- 多一次 HTTP 请求（即使 HTTP/2 多路复用，仍有队头阻塞和解析延迟）
- 重复代码难以维护（比如按钮通用样式分散在两个文件）
- 媒体查询嵌套逻辑比文件分离更灵活（例如
@media (hover: hover) and (pointer: fine)） - 构建工具（如 PostCSS、Webpack）对单文件内媒体查询的压缩、提取、兼容性处理更成熟
真正值得拆的，通常是「功能模块级」CSS（如 video-player.css），而不是「设备尺寸级」。
