求助：Footer无法通过@media规则实现屏幕适配动态变化

问题根源 #

1. HTML语法错误：
   • 嵌套的<Section>标签大小写不统一（开头大写、结尾小写</section>），会导致浏览器DOM解析异常
   • 电话链接的<a>标签存在未闭合的引号：href="tel+>，属于无效HTML，会干扰后续元素的识别
2. 若HTML修复后仍不生效，需检查CSS媒体查询的位置——确保媒体查询写在.Footer基础样式之后（你的代码已符合要求），避免被基础样式覆盖

修复步骤 #

1. 修正HTML语法错误 #

修正后的完整HTML代码：

<div class="Footer">
  <section>
    <div>
      <section>
        <a>Contact Us</a>
        <br>
        <i class="fa-solid fa-location-dot"></i><a href="Google address remmoved for privacy"> text address</a>
        <br>
        <a href="google address removed for privacy"> Text address </a>
      </section>
      <br>
      <i class="fa-solid fa-phone"></i><a href="tel:+你的电话号码"> Phone number </a>
    </div>
  </section>
  <section>
    <div>
      <a>
        Hours:
        <br>
        Monday - Friday: 8am - 5pm
        <br>
        Saturday: 8am - 1pm
        <br>
        Sunday: Closed
      </a>
    </div>
  </section>
  <section>
    <div>
      Navigate
      <br>
      <a href="https://www.facebook.com/">Facebook</a>
      <br>
      <a href="https://www.instagram.com/">Instagram</a>
      <br>
      <a href="https://www.youtube.com/">Youtube</a>
      <br>
      <a href="https://www.linkedin.com/">LinkedIn</a>
      <br>
      <a href="https://www.pinterest.com/">Pinterest</a>
      <br>
      <a href="https://www.twitter.com/">Twitter</a>
    </div>
  </section>
</div>
</body>
</html>

2. 验证CSS媒体查询 #

若修复HTML后仍无效果，可临时添加!important强制覆盖优先级（仅用于排查，不推荐长期使用）：

@media screen and (max-width: 614px){
  .Footer{
    display: none !important;
  }
}

优化建议 #

• 语义化改造：用HTML5的<footer>标签替代<div class="Footer">，更符合语义化标准，利于SEO和可读性
• 移动端友好布局：不建议直接隐藏Footer，小屏幕下可改为垂直排列，提升用户体验：

  @media screen and (max-width: 614px){
    .Footer{
      flex-direction: column;
      gap: 20px;
    }
    .Footer > section {
      width: 100%;
      text-align: left;
      padding: 10px 0;
      border-bottom: 1px solid #333;
    }
    .Footer > section:last-child {
      border-bottom: none;
    }
  }
  

• 统一过渡动画：目前hover状态的过渡时间与基础样式不一致（0.5s vs 0.7s），建议统一数值，保持动画连贯性：

  .Footer a, .Footer i {
    transition: color 0.5s ease;
  }
  

• 修正无效链接语义：无href的<a>标签语义错误，Contact Us和Hours:建议改用<h4>或<p>标签
• 确保图标加载：在HTML头部引入Font Awesome资源，否则图标无法显示

内容的提问来源于stack exchange，提问作者Huston Mandeville