如何使用Media Queries结合Flex实现响应式Footer（HTML/CSS）

优化后的 HTML 结构 #

<footer class="site-footer">
  <div class="footer-container">
    <div class="footer-section">
      <h3>关于我们</h3>
      <p>专注于提供优质的Web开发解决方案</p>
    </div>
    <div class="footer-section">
      <h3>快速链接</h3>
      <ul>
        <li><a href="/home">首页</a></li>
        <li><a href="/services">服务</a></li>
        <li><a href="/contact">联系我们</a></li>
      </ul>
    </div>
    <div class="footer-section">
      <h3>联系方式</h3>
      <p>邮箱：contact@example.com</p>
      <p>电话：123-456-7890</p>
    </div>
  </div>
  <div class="footer-bottom">
    <p>&copy; 2024 示例公司. 保留所有权利.</p>
  </div>
</footer>

对应的 CSS 代码（Flex + 媒体查询） #

/* 基础样式 */
.site-footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 2rem 0;
}

.footer-container {
  display: flex;
  justify-content: space-around;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap; /* 提前开启自动换行，适配中等屏幕 */
}

.footer-section {
  flex: 1;
  min-width: 250px; /* 设置最小宽度，避免区块被过度挤压变形 */
  margin: 0 1rem 1.5rem;
}

.footer-section h3 {
  margin-bottom: 1rem;
  color: #3498db;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: #ecf0f1;
  text-decoration: none;
}

.footer-section a:hover {
  color: #3498db;
}

.footer-bottom {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid #34495e;
}

/* 移动端适配媒体查询 */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* 小屏下切换为垂直排列 */
    align-items: center; /* 区块居中对齐 */
    text-align: center;
  }

  .footer-section {
    margin: 0 0 1.5rem;
  }
}

关键优化点说明 #

• HTML结构优化：用语义化<footer>标签包裹整体，拆分出主体内容区和版权区，每个功能区块用.footer-section统一包裹，结构清晰易维护。
• Flex布局核心：.footer-container设置display: flex实现横向布局，flex-wrap: wrap确保中等屏幕自动换行；.footer-section用flex:1平分可用空间，min-width避免挤压变形。
• 媒体查询适配：屏幕宽度≤768px时，切换flex-direction为column实现垂直排列，同时调整对齐方式和边距，适配移动端视觉逻辑。

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