缩小窗口时按钮重叠

/* 默认样式 */
.button {
    width: 100px;
    height: 50px;
}

/* 小屏幕样式 */
@media (max-width: 600px) {
    .button {
        width: 80px;
        height: 40px;
    }
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.button {
    flex: 1 1 100px; /* 每个按钮至少100px宽，可以增长和收缩 */
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

window.addEventListener('resize', function() {
    const buttons = document.querySelectorAll('.button');
    buttons.forEach(button => {
        if (window.innerWidth < 600) {
            button.style.width = '80px';
            button.style.height = '40px';
        } else {
            button.style.width = '100px';
            button.style.height = '50px';
        }
    });
});