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

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" class。

我不知道 CSS 是否可行，或者我是否需要使用 JavaScript，但我对这两者都是新手，所以如果你能解释一下我会很高兴恰恰是理想的完成方式。

Answer 1

你可以这样做

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

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

覆盖

Answer 2

如果你想有两个独立的图标，你绝对可以有一些 CSS 逻辑，就像这样：

  @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; }
  }

您只需用适当的类 =]

标记它们

Answer 3

遵循他们在文档中的陈述

Icons inherit the font-size of their parent container

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

.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 而不是 width/heigth:

@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>

最好使用上述解决方案，但如果您want/need 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 事件。

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

How to remove a CSS class from an element because of the devices screen width?

html

javascript

css

media-queries

font-awesome