使用媒体查询和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监听实现无缝过渡。不复杂但容易忽略细节，比如及时清理事件监听或避免重复加载资源。
