html - 如何使用@media 定位社交媒体图标以获得最大宽度？

Question

我创建了 5 个社交媒体图标，它们位于页面中间的中心位置，它们都在同一行上并排放置。我希望社交媒体图标与页面的左边距对齐，并在窗口尺寸减小时显示在彼此下方。我尝试了以下代码，但它没有用。(当我减小窗口的大小时，图标在彼此下方对齐但仍居中在页面中间，我希望它们向左对齐。)

@media (max-width: 1200px) {
  .ul {
    display: none;
  }
  .bars2 {
    display: block;
  }
  .social {
    margin-left: 0;
    left: 0;
  }
  .social .fa {
    display: block;
  }
}

.fa {
  background-color: black;
  color: white;
  text-decoration: none;
  font-size: 30px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 10px;
}

.fa:hover {
  color: #7E7791;
  background: white;
}

#social {
  height: 40px;
  width: 300px;
  margin-top: 10%;
  position: absolute;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

<div id="social" class="social">
  <a href="#" class="fa fa-youtube-play"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-pinterest"></a>
</div>

Answer 1

你的风格看起来不错。问题出在您的选择器上，有 2 个主要问题

1- 您需要将媒体查询放在文档的底部。请记住，css 是一种层叠语言，会优先考虑最后的样式。

2- 一旦你完成了第一点，css 也会根据选择器的级别优先考虑样式。您为 id 选择器提供了 auto 的值，为 class 选择器提供了 0 的值。这优先考虑 de id 选择器。因此你没有得到 0 值

希望对您有所帮助:)

.fa {
  background-color: black;
  color: white;
  text-decoration: none;
  font-size: 30px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 10px;
}

.fa:hover {
  color: #7E7791;
  background: white;
}

#social {
  height: 40px;
  width: 300px;
  margin-top: 10%;
  position: absolute;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}


@media (max-width: 1200px) {
  .ul {
    display: none;
  }
  .bars2 {
    display: block;
  }
#social {
    margin-left: 0;
    left: 0;
  }
  .social .fa {
    display: block;
  }
}

<div id="social" class="social">
  <a href="#" class="fa fa-youtube-play"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-pinterest"></a>
</div>