如何用css实现响应式页脚组件

<footer class="site-footer">
  <div class="footer-section brand-info">
    <img src="logo.png" alt="公司Logo" class="footer-logo">
    <p>我们的使命是...</p>
  </div>
  <nav class="footer-section footer-nav">
    <h3>快速链接</h3>
    <ul>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
      <li><a href="#">隐私政策</a></li>
    </ul>
  </nav>
  <div class="footer-section social-links">
    <h3>关注我们</h3>
    <div class="social-icons">
      <a href="#"><i class="icon-facebook"></i></a>
      <a href="#"><i class="icon-twitter"></i></a>
      <a href="#"><i class="icon-linkedin"></i></a>
    </div>
  </div>
  <div class="footer-section copyright">
    <p>&copy; 2023 您的公司. All rights reserved.</p>
  </div>
</footer>

.site-footer {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
  justify-content: space-around; /* 项目之间和边缘有空间 */
  align-items: flex-start; /* 顶部对齐 */
  padding: 20px;
  background-color: #333;
  color: #fff;
  font-family: Arial, sans-serif;
}

.footer-section {
  flex: 1; /* 每个section占据等量空间 */
  min-width: 250px; /* 最小宽度，防止在桌面端挤压过小 */
  margin: 15px;
}

.footer-logo {
  max-width: 120px;
  height: auto;
  margin-bottom: 10px;
}

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

.footer-nav li a {
  color: #ccc;
  text-decoration: none;
  line-height: 1.8;
  display: block; /* 让链接占据整行，方便点击 */
}

.footer-nav li a:hover {
  color: #fff;
}

.social-icons a {
  color: #fff;
  font-size: 24px;
  margin-right: 15px;
  text-decoration: none;
}

.social-icons a:hover {
  color: #007bff; /* 鼠标悬停时的颜色 */
}

.copyright {
  flex-basis: 100%; /* 版权信息独占一行 */
  text-align: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #555;
  font-size: 0.9em;
  color: #aaa;
}

/* 媒体查询：针对小屏幕设备 */
@media (max-width: 768px) {
  .site-footer {
    flex-direction: column; /* 在小屏幕上垂直堆叠 */
    align-items: center; /* 居中对齐 */
    padding: 15px;
  }

  .footer-section {
    min-width: unset; /* 取消最小宽度限制 */
    width: 90%; /* 占据大部分宽度 */
    text-align: center;
    margin: 10px 0;
  }

  .footer-nav ul {
    text-align: center;
  }

  .social-icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .copyright {
    margin-top: 15px;
    padding-top: 10px;
  }
}

/* 媒体查询：针对更小的手机屏幕 */
@media (max-width: 480px) {
  .footer-logo {
    max-width: 100px;
  }

  .social-icons a {
    font-size: 20px;
    margin: 0 10px;
  }

  .footer-section h3 {
    font-size: 1.1em;
  }
}

.site-footer

display: flex; flex-wrap: wrap;

justify-content: space-around;

768px

flex-direction: column;

align-items: center;

overflow-wrap: break-word;

word-break: break-all;

margin

padding

align-items: flex-start;

align-items: stretch;

grid-template-areas

grid-template-columns

grid-template-rows

<footer

<nav>

<ul>

<li>

<a>

href

Tab

<a>

tabindex="0"

:focus

em

rem

line-height

<img>

alt

aria-label

<a href="#" aria-label="访问我们的Facebook页面"><i class="icon-facebook"></i></a>