Javascript 在屏幕调整时为引导元素分配新类不起作用

当窗口达到991px或更小时，我试图将glyphicon类从fa-3x大小更改为fa-2x大小。当窗口以991px或更小的速度加载时，它也需要更改。。。以下是我尝试过的两种选择：

JAVASCRIPT方法1： 及

JAVASCRIPT方法2：

---

这两个选项都不起作用。。如果您有任何想法或解决方案，我们将不胜感激，谢谢

找到了解决方案！每次窗口小于991px时，我只需重写html代码，而不是更改类：

使用Javascript方法1： HTML代码：

<button id="btn6" type="button" class="btn btn-default"><p id="btn6Text">READ MORE ABOUT US<i id="glyph2" class="fa fa-caret-right fa-3x"></i></p></button>

JAVASCRIPT代码：

/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING DOCUMENT READY*/
if( $(window).innerWidth() <= 991)
  {document.getElementById("btn6Text").innerHTML = "READ MORE ABOUT US<i id='glyph2' class='fa fa-caret-right fa-2x'></i>";}
else if( $(window).innerWidth() > 991)
  {document.getElementById("btn6Text").innerHTML = "READ MORE ABOUT US<i id='glyph2' class='fa fa-caret-right fa-3x'></i>";}

/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING RESIZE*/
$(window).resize(function () {
if( $(window).innerWidth() <= 991)    
  {document.getElementById("btn6Text").innerHTML = "READ MORE ABOUT US<i id='glyph2' class='fa fa-caret-right fa-2x'></i>";} 
else if( $(window).innerWidth() > 991)  
  {document.getElementById("btn6Text").innerHTML = "READ MORE ABOUT US<i id='glyph2' class='fa fa-caret-right fa-3x'></i>";};
}); 

因此，每次窗口小于991px时，我都会重写以下代码：

<button id="btn6" type="button" class="btn btn-default"><p id="btn6Text">READ MORE ABOUT US<i id="glyph2" class="fa fa-caret-right fa-3x"></i></p></button>

为此：

<button id="btn6" type="button" class="btn btn-default"><p id="btn6Text">READ MORE ABOUT US<i id="glyph2" class="fa fa-caret-right fa-2x"></i></p></button>

区别：fa-3x使用fa-2x更改代码

更简单的CSS和媒体查询方法： 可能是最好最简单的方法-仅使用媒体查询和CSS：

HTML代码：

<button id="btn6" type="button" class="btn btn-default"><p id="btn6Text">READ MORE ABOUT US<i id="glyph2" class="fa fa-caret-right fa-3x"></i></p></button>

CSS代码：

/* When SCREEN VW <= 991px ----------- */
@media only screen
and (max-width : 991px) {

/* Styles */
#glyph2 {
    font-size: 2em !important;
}

}

---

如果您正在寻找仅CSS和字体很棒/引导式的解决方案， 以下是您可以做的：

创建一些新的CSS类来表示lg、2x、3x、4x和5x。例如，对于您想要的sm、md和lg，每个引导屏幕大小对应一个。然后对它们使用@media

你会得到这样的结果：

/* sm */
@media (min-width: 768px) { 
    .fa-3x-sm {
        font-size: 3em !important;
    }
    .fa-2x-sm {
        font-size: 2em !important;
    }
    .fa-lg-sm {
        font-size: 1.33333333em !important;
        line-height: 0.75em !important;
        vertical-align: -15% !important;
    }
}
/* md */
@media (min-width: 992px) {
    .fa-3x-md {
        font-size: 3em !important;
    }
    .fa-2x-md {
        font-size: 2em !important;
    }
    .fa-lg-md {
        font-size: 1.33333333em !important;
        line-height: 0.75em !important;
        vertical-align: -15% !important;
    }
}
/* lg */
@media (min-width: 1200px) {
    .fa-3x-lg {
        font-size: 3em !important;
    }
    .fa-2x-lg {
        font-size: 2em !important;
    }
    .fa-lg-lg {
        font-size: 1.33333333em !important;
        line-height: 0.75em !important;
        vertical-align: -15% !important;
    }
}

我只使用fa-lg、fa-2x和fa-3x来保持简短。 有了它，你可以使用fa-3x-lg在lg分辨率上获得一个3x大小的图标，在更小的屏幕上获得一个常规大小的图标

或者，您可以像在引导解决方案中一样将其中一些图标组合在一起，就像使用fa-2x-sm fa-3x-md会在md屏幕大小和更大的屏幕上显示3倍大小的图标，在sm屏幕大小上显示2倍大小的图标，在更小的屏幕上显示常规大小的图标

这就像在类上使用bootstrap的一些约定一样

希望能有帮助

/* When SCREEN VW <= 991px ----------- */
@media only screen
and (max-width : 991px) {

/* Styles */
#glyph2 {
    font-size: 2em !important;
}

}

/* sm */
@media (min-width: 768px) { 
    .fa-3x-sm {
        font-size: 3em !important;
    }
    .fa-2x-sm {
        font-size: 2em !important;
    }
    .fa-lg-sm {
        font-size: 1.33333333em !important;
        line-height: 0.75em !important;
        vertical-align: -15% !important;
    }
}
/* md */
@media (min-width: 992px) {
    .fa-3x-md {
        font-size: 3em !important;
    }
    .fa-2x-md {
        font-size: 2em !important;
    }
    .fa-lg-md {
        font-size: 1.33333333em !important;
        line-height: 0.75em !important;
        vertical-align: -15% !important;
    }
}
/* lg */
@media (min-width: 1200px) {
    .fa-3x-lg {
        font-size: 3em !important;
    }
    .fa-2x-lg {
        font-size: 2em !important;
    }
    .fa-lg-lg {
        font-size: 1.33333333em !important;
        line-height: 0.75em !important;
        vertical-align: -15% !important;
    }
}