使用媒体查询和javaScript结合实现css按条件切换，先通过媒体查询定义响应式断点，再用javascript监听设备特性或用户行为动态切换类名或加载外部样式，如基于屏幕宽度或色彩偏好应用不同主题，确保灵活性与交互性统一。
要在html中实现CSS按条件切换，可以结合使用媒体查询和JavaScript，根据设备特性或用户行为动态调整样式。这种方式既保留了响应式设计的灵活性，又增强了交互控制能力。
使用媒体查询定义响应式断点
媒体查询是CSS中用于根据设备特征（如屏幕宽度、方向、分辨率等）应用不同样式的机制。通过它，可以在不同设备上自动加载对应样式。
例如：
@media (max-width: 768px) { body { font-size: 14px; } .container { width: 100%; } } @media (min-width: 769px) { body { font-size: 16px; } .container { width: 1200px; } }这类写法适合静态响应式布局，但无法在运行时动态更改条件或响应用户操作。
用JavaScript监听并切换CSS类
为了实现更灵活的条件控制，可以通过JavaScript检测运行时状态，并为元素添加或移除CSS类，从而切换样式。
立即学习“前端免费学习笔记（深入）”；
常见做法包括：
- 监听窗口大小变化，判断是否匹配特定条件
- 根据用户操作（如点击按钮）切换主题或布局模式
- 结合matchMedia API模拟媒体查询逻辑
示例：使用 matchMedia 切换移动端/桌面端样式
const mediaQuery = window.matchMedia('(max-width: 768px)'); function handleScreenChange(e) { if (e.matches) { document.body.classlist.add('mobile-view'); document.body.classList.remove('desktop-view'); } else { document.body.classList.add('desktop-view'); document.body.classList.remove('mobile-view'); } } // 初始检查 handleScreenChange(mediaQuery); // 监听变化 mediaQuery.addEventListener('change', handleScreenChange);动态加载外部CSS文件
在某些复杂场景下，可以按需加载不同的CSS文件，比如为打印视图或高对比度模式加载专用样式表。
示例：根据用户偏好加载深色主题
function loadDarkTheme() { let link = document.getElementById('theme-style'); if (!link) { link = document.createElement('link'); link.id = 'theme-style'; link.rel = 'stylesheet'; document.head.appendChild(link); } link.href = 'dark-theme.css'; } // 按条件调用 if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { loadDarkTheme(); }这种方式适合分离差异较大的样式集，避免主CSS文件臃肿。
基本上就这些。媒体查询处理常规响应式需求，JavaScript提供运行时控制能力，两者结合能实现精细的条件化样式切换。关键在于合理划分样式边界，利用类名管理和API监听实现无缝过渡。不复杂但容易忽略细节，比如及时清理事件监听或避免重复加载资源。