用setTimeout定时检测替代media query做响应式布局是否合理？

这个方案确实欠佳，主要问题有这几点： #

• 没必要的性能消耗：每100ms就跑一次检测，不管屏幕宽度变没变都要执行代码。浏览器原生的resize事件只在宽度变化时触发，media query更是底层优化过的，开销比这种轮询小太多。频繁的定时器会占主线程资源，低端设备上可能出现卡顿。
• 视觉延迟明显：100ms的间隔意味着布局调整最多慢100ms才生效，用户拖窗口改大小时，能明显看到布局跟窗口不同步，体验很别扭。
• 代码维护麻烦：用JS手动控制样式，比CSS media query啰嗦多了，而且你还要处理sidebar的open类，逻辑多了容易出bug。

小型网站用这个方案可行吗？ #

如果是功能极简的小站（比如只有静态页面，几乎没交互），勉强能凑合用，但真的不推荐。哪怕是小站，也没必要牺牲性能和用户体验，而且以后要是加功能，这种代码的维护成本会越来越高。

给你两个更好的替代方案： #

方案一：用CSS Media Query（最推荐）

直接写CSS就能实现需求，完全不用JS，性能最好，代码也清爽：

/* 大屏幕默认样式 */
.sidebar {
    display: block;
}
.hamburger {
    display: none;
}

/* 宽度小于1100px时的样式 */
@media (max-width: 1099px) {
    .sidebar:not(.open) {
        display: none;
    }
    .hamburger {
        display: flex;
    }
}

浏览器会自动处理宽度变化时的样式切换，响应即时，没额外开销。

方案二：监听resize事件（必须用JS的话）

如果因为特殊逻辑非得用JS，那就监听resize事件，再加个防抖避免频繁触发：

function handleResize() {
    const screenWidth = window.innerWidth;
    if (screenWidth < 1100) {
        if (!sidebar.classList.contains('open')) {
            sidebar.style.display = 'none';
        }
        hamburger.style.display = 'flex';
    } else {
        sidebar.style.display = 'block';
        hamburger.style.display = 'none';
    }
}

// 防抖函数，防止resize短时间内多次触发
function debounce(func, delay = 100) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func, delay);
    };
}

// 页面加载先执行一次
handleResize();
// 绑定resize事件，用防抖包装
window.addEventListener('resize', debounce(handleResize));

这样只有屏幕宽度真的变化时才会执行代码，性能比轮询好太多。

内容的提问来源于stack exchange，提问作者Soumya Sagnik Khanda