由于设备屏幕宽度，如何从元素中删除 CSS 类？

Question

我正在为我的网站使用 FontAwsome 图标，如下所示：

<i class="fab fa-instagram fa-2x social-icon" title="Instagram"></i>
<i class="fab fa-youtube fa-2x social-icon" title="YouTube"></i>
<i class="fab fa-twitter fa-2x social-icon" title="Twitter"></i>

如您所见，我使用的是“fa-2x”，它使图标大小增加了一倍。 当用户的屏幕小于 400px 时，我希望图标变小。我尝试过使用这样的 CSS 媒体查询：

@media only screen and (max-width:400px) {
    .social-icon {
        width: 32px;
        height: 32px;
    }
}

但是 FontAwsome 图标不支持这一点，所以我想在屏幕宽度为 400 像素或更小的时候从每个图标中删除“fa-2x”类。

我不知道这是否可以通过 CSS 实现，或者我是否需要使用 JavaScript，但我对这两者都很陌生，所以如果你能准确解释一下它是如何实现的，我会很高兴。

Answer 1

按照他们在文档中的说明

图标继承其父容器的字体大小

您可以将您的图标包装在一个容器中，并根据屏幕大小控制它们的字体大小：

.fontsize {
  font-size: 24px; // or use em for relative sizing
}

@media only screen and (max-width:400px) {
  .fontsize {
    font-size: 12px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.js"></script>
<div class="fontsize">
  <i class="fab fa-instagram fa-2x social-icon" title="Instagram"></i>
  <i class="fab fa-youtube fa-2x social-icon" title="YouTube"></i>
  <i class="fab fa-twitter fa-2x social-icon" title="Twitter"></i>
</div>

或将您原来的尝试更改为 font-size 而不是宽度/高度：

@media only screen and (max-width:400px) {
  .social-icon {
    font-size: 1em;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.js"></script>
<i class="fab fa-instagram fa-2x social-icon" title="Instagram"></i>
<i class="fab fa-youtube fa-2x social-icon" title="YouTube"></i>
<i class="fab fa-twitter fa-2x social-icon" title="Twitter"></i>

最好使用上述解决方案，但如果您想要/需要 JS 解决方案：

let mql = window.matchMedia('(max-width: 400px)');

if (mql.matches) {

  var elems = document.getElementsByClassName('social-icon');
  [].forEach.call(elems, function(el) {
    el.classList.remove("fa-2x");
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.js"></script>
<i class="fab fa-instagram fa-2x social-icon" title="Instagram"></i>
<i class="fab fa-youtube fa-2x social-icon" title="YouTube"></i>
<i class="fab fa-twitter fa-2x social-icon" title="Twitter"></i>

以上内容仅适用于页面加载，如果加载后大小发生变化，则无效。为此，您需要收听 resize 事件。

Answer 2

你可以这样做

@media only screen and (max-width:400px) {
    .social-icon, .fa-2x {
        width: 32px;
        height: 32px;
    }
}

当您尝试使用 .social-icon 更改宽度时，它会被 .fa-2x 覆盖

Answer 3

如果您想拥有两个独立的图标，您绝对可以使用一些 CSS Logic，如下所示：

  @media only screen and (max-width:400px){
    .social_icon_big{ display: none; }
    .social_icon_small{ display: block; }
  }

  @media only screen and (min-width:400px){
    .social_icon_big{ display: block; }
    .social_icon_small{ display: none; }
  }

你只需要用适当的类标记它们 =]