答案是通过HTML的media属性和JavaScript可实现CSS按条件加载。使用media属性可根据屏幕宽度引入不同样式表，适用于响应式设计；JavaScript则能基于窗口尺寸、用户偏好等复杂条件动态创建link标签加载CSS；结合预加载可优化性能，提升用户体验。
在网页开发中，有时需要根据不同的条件加载不同的CSS样式文件，比如针对不同设备、浏览器或屏幕尺寸应用特定样式。虽然CSS本身不支持直接“按条件引入”，但可以通过HTML和JavaScript结合实现这一需求。
1. 使用media属性进行响应式引入
通过 link标签的media属性，可以根据设备特征（如屏幕宽度）决定是否加载某个CSS文件。
例如：
这种方式常用于响应式设计，浏览器会根据当前视口宽度选择性地加载对应样式表。
2. 使用JavaScript动态加载CSS文件
如果条件更复杂（如用户角色、系统主题、浏览器类型等），可以用JavaScript动态创建link标签来按需引入。
立即学习“前端免费学习笔记（深入）”；
网钛淘拍CMS(TaoPaiCMS) V1.60
下载
2013年07月06日 V1.60 升级包更新方式：admin文件夹改成你后台目录名，然后补丁包里的所有文件覆盖进去。1.[新增]后台引导页加入非IE浏览器提示，后台部分功能在非IE浏览器下可能没法使用2.[改进]淘客商品管理 首页 列表页 内容页 的下拉项加入颜色来区别不同项3.[改进]后台新增/修改淘客商品，增加淘宝字样的图标和天猫字样图标改成天猫logo图标4.[改进]为统一名称，“分类”改
const link = document.createElement('link');
link.rel = 'stylesheet';
if (window.innerWidth <= 768) {
link.href = 'mobile.css';
} else {
link.href = 'desktop.css';
}
document.head.appendChild(link);
也可以根据用户偏好（如暗色模式）判断：
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
loadCSS('dark-theme.css');
}
3. 预加载与性能优化建议
使用条件加载时注意避免阻塞渲染。可以提前预加载关键资源：
再通过脚本控制实际引入。这样既保证了性能，又实现了按需加载。
基本上就这些方法。media属性适合简单的设备判断，JavaScript更适合复杂逻辑。合理使用能提升页面加载效率和用户体验。
