在屏幕调整大小时为引导程序元素分配新类不起作用

Assigning new classes to bootstrap elements at screen resize not working

本文关键字：元素 分配 新类 不起作用 引导程序 屏幕 调整 小时      更新时间：2023-09-26

当窗口达到991px或更小时，我试图将FONT-AWEHOME字形图标类从fa-3x大小更改为fa-2x大小。当窗口加载到991px或更小时，它也需要更改。。。我试过两种选择：

JAVASCRIPT方法1：

/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING DOCUMENT READY*/
    if( $(window).innerWidth() <= 991)
      {document.getElementById('#glyph2').className = "fa fa-caret-right fa-2x";} 
    else if( $(window).innerWidth() > 991)
      {document.getElementById('#glyph2').className = "fa fa-caret-right fa-3x";} 
/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING RESIZE*/
  $(window).resize(function () {
    if( $(window).innerWidth() <= 991)    
      {document.getElementById('#glyph2').className = "fa fa-caret-right fa-2x";} 
    else if( $(window).innerWidth() > 991)  
      {document.getElementById('#glyph2').className = "fa fa-caret-right fa-3x";};
});

和

JAVASCRIPT方法2：

(function($) {
var $window = $(window),
    $glyph2 = $('#glyph2');
function resize() {
    if ($window.width() <= 991) {
        return $glyph2.addClass('fa fa-caret-right fa-2x');
    }
    $glyph2.addClass('fa fa-caret-right fa-3x');
}
$window
    .resize(resize)
    .trigger('resize');
})(jQuery);

这两个选项都不起作用。。任何想法或解决方案都将不胜感激！

更简单的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;
}
}

JSFIDDLE演示此处

（找到了一个修复！我没有更改类，只是在每次窗口小于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和Font Awesome/Bootstrap风格的解决方案，以下是您可以做的：

创建一些新的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分辨率下获得一个3倍大小的图标，在较小的屏幕上获得一个常规大小的图标。

或者，您可以像在引导程序解决方案中一样将其中一些组合在一起，就像使用fa-2x-sm fa-3x-md会在md屏幕大小及以上的屏幕上为您提供3倍大小的图标，在sm屏幕大小上为2倍大小的按钮，在更小的屏幕上提供常规大小的按钮一样。

这就像在FontAwesome大小类上使用bootstrap的一些约定。

希望能有所帮助。

相关文章：