答案是通过HTML的media属性和JavaScript可实现CSS按条件加载。使用media属性可根据屏幕宽度引入不同样式表，适用于响应式设计；JavaScript则能基于窗口尺寸、用户偏好等复杂条件动态创建link标签加载CSS；结合预加载可优化性能，提升用户体验。
在网页开发中，有时需要根据不同的条件加载不同的CSS样式文件，比如针对不同设备、浏览器或屏幕尺寸应用特定样式。虽然CSS本身不支持直接“按条件引入”，但可以通过HTML和JavaScript结合实现这一需求。
1. 使用media属性进行响应式引入
通过 link标签的media属性，可以根据设备特征（如屏幕宽度）决定是否加载某个CSS文件。
例如：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)" /><link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)" />
这种方式常用于响应式设计，浏览器会根据当前视口宽度选择性地加载对应样式表。
2. 使用JavaScript动态加载CSS文件
如果条件更复杂（如用户角色、系统主题、浏览器类型等），可以用JavaScript动态创建link标签来按需引入。
立即学习“前端免费学习笔记（深入）”；
示例：根据屏幕宽度动态加载
const link = document.createElement('link');<br>
link.rel = 'stylesheet';<br>
if (window.innerWidth <= 768) {<br>
link.href = 'mobile.css';<br>
} else {<br>
link.href = 'desktop.css';<br>
}<br>
document.head.appendChild(link);
也可以根据用户偏好（如暗色模式）判断：
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {<br>
loadCSS('dark-theme.css');<br>
}
3. 预加载与性能优化建议
使用条件加载时注意避免阻塞渲染。可以提前预加载关键资源：
<link rel="preload" href="theme-dark.css" as="style" />
再通过脚本控制实际引入。这样既保证了性能，又实现了按需加载。
基本上就这些方法。media属性适合简单的设备判断，JavaScript更适合复杂逻辑。合理使用能提升页面加载效率和用户体验。
