使用media属性按设备特性加载CSS可提升性能，如<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">；结合CSS媒体查询可在单文件内适配不同屏幕；动态加载可通过JavaScript创建link标签实现；建议优先使用静态分发、内联关键样式、合并小文件以优化体验。
在现代网页开发中，根据不同设备或屏幕尺寸加载对应的CSS文件是实现响应式设计的重要手段。通过HTML中的条件引入和CSS媒体查询，可以有效提升页面性能并优化用户体验。
使用media属性按屏幕尺寸引入CSS
在HTML的<link>标签中，可以通过media属性指定何时加载某个CSS文件。浏览器会根据设备特性判断是否应用该样式表。
例如，只为打印设备引入特定样式：
<link rel="stylesheet" href="print.css" media="print">针对不同屏幕宽度加载不同CSS：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)"><link rel="stylesheet" href="tablet.css" media="(min-width: 768px) and (max-width: 1023px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">
这种方式让浏览器只解析和渲染当前设备需要的样式，减少资源浪费。
结合CSS媒体查询做精细化控制
除了在HTML中分离文件，也可以在一个CSS文件内使用媒体查询进行适配。这种做法适合样式差异较小的场景。
示例：
@media (max-width: 767px) {
body { font-size: 14px; }
nav { display: none; }
}
@media (min-width: 768px) {
body { font-size: 16px; }
}
将多个断点写入单一文件，便于维护，但所有样式都会被下载，可能影响移动端性能。
动态加载与JavaScript配合使用
某些情况下需要更灵活的控制逻辑，比如根据用户行为或环境特征动态引入CSS。
可通过JavaScript创建<link>标签实现：
link.rel = 'stylesheet';
link.href = window.innerWidth <= 767 ? 'mobile.css' : 'desktop.css';
document.head.appendChild(link);
注意：这种方法延迟了样式的加载，可能导致页面闪烁，建议预判条件尽早执行。
性能与兼容性建议
为保证加载效率和兼容性，注意以下几点：
- 优先使用
media属性做静态分发，避免全部依赖JS - 关键样式仍应内联或同步加载，防止内容闪现
- 老版本IE不支持部分媒体查询语法，必要时使用polyfill或条件注释
- 合并小体积CSS，减少HTTP请求数
基本上就这些，合理组合HTML条件引入与CSS媒体查询，能兼顾适配效果与性能表现。
