Javascript 向HTML添加类的css媒体查询

我有这个HTML：

<li><a href=""><i class="fa fa-iconname" style="vertical-align: middle;"></i>Link Name</a></li>

如何将标签更改为：

<i class="fa fa-iconname lg-2x" style="vertical-align: middle;"></i>

---

当媒体查询生效时？

CSS只是一种样式语言，它实际上无法编辑HTML

如果要实际更改HTML，请使用javascript：

jQuery：

var $homeIcon = $('.fa-iconname');

$(window).resize(function() {
  if (window.innerWidth <= 1000) $homeIcon.addClass('lg-2x');
  else $homeIcon.removeClass('lg-2x');
});

var$homeIcon=$（'.fa iconname'）；
$（窗口）。调整大小（函数（）{
如果（window.innerWidth您不能用css来实现，但可以用JavaScript或jQuery来实现

fa-2x本质上是：
字体大小：2em；
。因此，您可以这样做：

@media (max-width: 1000px) {
    .fa-iconname {
    font-size: 2em;
    }
} 

当窗口大小小于1000px时，切换元素li上的lg-2x类

$( window ).resize(function() {
    if($(window).width() <=1000) {
        $('i').toggleClass(function() {
           if ( $( this ).is( ".lg-2x" ) ) {
               console.log("class already there good to go");
           } else {
              $( this ).addClass("lg-2x");
           }
        }
    }else{
           $('i').removeClass("lg-2x");
    }

});

$（窗口）。调整大小（函数（）{
如果（$（window）.width（），您可以使用纯css来实现这一点，只需复制列表项并切换媒体查询，如下所示：

HTML:

您可以为更大的屏幕创建一个等效类，并将其保留为空：

@media (min-width: 1000px) {
    .lg-2x {
        /* empty class */
    }
}

并从一开始就将其分配给html元素。
您可以切换类“lg-2x”如果没有，那么就添加它。它更快，但从长远来看，当我们需要添加类时，切换类是好的。然而，我喜欢你的答案简单且易于实现。干得好！这是最好的答案。使用JS resize函数是个坏主意，因为resize在许多浏览器中都有bug。我见过几个调整fai大小的案例ls基于抓取窗口的角落或底部边缘等来启动。但是使用两个类
大屏幕
和
小屏幕
在很多方面都是超级通用的。事实上，这是最好的一个。它不利于seo。从维护角度来看，这不是一个很好的解决方案。如果你需要经常这样做，你最终会得到这么多复制/粘贴元素的rts，这很容易导致在几个月甚至几年后维护代码时出错。JavaScript方法更复杂，但不会复制代码。
$( window ).resize(function() {
    if($(window).width() <=1000) {
        $('i').toggleClass(function() {
           if ( $( this ).is( ".lg-2x" ) ) {
               console.log("class already there good to go");
           } else {
              $( this ).addClass("lg-2x");
           }
        }
    }else{
           $('i').removeClass("lg-2x");
    }

});

<li class="bigScreen"><a href=""><i class="fa fa-iconname"></i>Link Name</a></li>

<li class="smallScreen"><a href=""><i class="fa fa-iconname lg-2x"></i>Link Name</a></li>

@media (max-width: 1000px) {
  .bigScreen {
    display:none;
  }
  .smallScreen {
    display:block;
  }
}

@media (min-width: 1001px) {
  .bigScreen {
    display:block;
  }
  .smallScreen {
    display:none;
  }
}

@media (min-width: 1000px) {
    .lg-2x {
        /* empty class */
    }
}