Elementor网站CSS媒体查询异常：移动端/桌面端动画仅其一生效求助

你的问题根源是CSS代码存在未闭合的媒体查询块，浏览器解析时会把后续代码错误嵌套进未闭合的块里，导致只有最上方的规则能正常生效。

修正后的完整代码 #

/* 平板端样式 */
@media (min-width: 415px) and (max-width: 800px){
  .text-aboutus {
    background-color: #F1E3D6;
    border-radius: 10px
  }
}

/* 移动端样式 + 动画（合并到同一个媒体查询，避免冗余） */
@media (max-width: 414px){
  .text-aboutus-mobile {
    background-color: #F1E3D6;
    border-radius: 10px;
    margin-left: 5% ;
    margin-top: 60%;
    animation: fade-in-about-us-mobile 1.5s ease-in forwards;
    opacity: 0;
    transform: translateX(100%);
  }

  @keyframes fade-in-about-us-mobile {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0%);
    }
  }
}

/* 桌面/平板端动画 */
@media (min-width:415px) {
  .text-aboutus {
    animation: fade-in-about-us 2s ease-in forwards;
    opacity: 0;
  }

  @keyframes fade-in-about-us {
    from { opacity:0; }
    to {opacity: 1; }
  }
}

关键修正说明 #

1. 闭合所有媒体查询块：每个@media声明都必须用}结尾，之前的代码中移动端样式的媒体查询没有闭合，导致后续的动画规则被错误嵌套进去，优先级完全混乱
2. 合并重复媒体查询：把移动端的基础样式和动画规则放在同一个@media (max-width:414px)块里，减少冗余，也避免解析混乱
3. 规则优先级明确：现在不同断点的样式/动画各自独立，不会互相覆盖或嵌套，Elementor加载时能正确匹配对应设备的规则

内容的提问来源于stack exchange，提问作者Mac Naab