请求修复响应式按钮问题：移动端按钮失效，附相关代码

问题诊断 #

从提供的代码来看，导致移动设备按钮失效的核心原因集中在两点：

• 重复的CSS规则引发样式冲突，初始设置的visibility: hidden在部分移动浏览器中会阻断触摸事件触发（即便添加aos-animate类恢复可见性，仍存在兼容性隐患）
• 未针对移动设备优化按钮交互区域，可能出现按钮重叠、点击区域过小或被遮挡的情况

修复步骤 #

1. 清理重复CSS并优化可见性控制

删除重复的CSS规则，改用opacity替代visibility实现元素隐藏（opacity对触摸事件的兼容性更稳定）：

/* 合并优化后的基础样式 */
.plan__tabs-row {
    margin: 25px 0;
    position: relative;
    animation-duration: 1s;
    animation-fill-mode: both;
    opacity: 0; /* 替换visibility，保留元素交互能力 */
}

.aos-animate.plan__tabs-row {
    opacity: 1;
    animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
}

2. 优化移动设备按钮交互

添加响应式样式，保证按钮在移动设备上有足够的点击区域，避免交互失效：

/* 移动设备专属样式 */
@media (max-width: 768px) {
    .plan__tab-conteiner {
        display: flex;
        flex-direction: column; /* 垂直排列按钮，避免横向挤压 */
        gap: 10px;
        padding: 0 15px;
    }

    .plan__tab-conteiner button {
        padding: 12px 16px;
        font-size: 16px; /* 符合移动端触摸规范的字体大小 */
        cursor: pointer;
        touch-action: manipulation; /* 禁用默认触摸缩放，提升点击响应速度 */
    }
}

3. 确保AOS动画正常初始化

确认AOS库在移动设备上未被禁用，保证动画触发后元素状态正常：

// 初始化AOS，启用移动设备支持
AOS.init({
    disable: false,
    once: true, // 动画仅触发一次
});

最终代码示例 #

HTML无需修改，更新后的完整CSS如下：

.plan__tabs-row {
    margin: 25px 0;
    position: relative;
    animation-duration: 1s;
    animation-fill-mode: both;
    opacity: 0;
}

.aos-animate.plan__tabs-row {
    opacity: 1;
    animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
}

@media (max-width: 768px) {
    .plan__tab-conteiner {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 15px;
    }

    .plan__tab-conteiner button {
        padding: 12px 16px;
        font-size: 16px;
        cursor: pointer;
        touch-action: manipulation;
    }
}

内容的提问来源于stack exchange，提问作者Gill Hetti