在屏幕调整大小时将新的类分配给 bootstrap 元素不起作用

Question

我试图在 window 达到 991px 或更小时将 FONT-AWESOME 字形 class 从 fa-3x 大小更改为 fa-2x 大小。当 window 以 991px 或更小加载时，它也需要更改...这是我尝试过的两个选项：

JAVASCRIPT 方法一：

/*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 方法二：

(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);

这两个选项都不起作用。任何想法或修复将不胜感激，谢谢！

Answer 1

（已找到修复方法！我没有更改 class，而是在每次 window 最终小于 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>";};
});

所以每次 window 最终小于 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

Answer 2

更简单的 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 DEMO HERE

Answer 3

如果您正在寻找仅 CSS 和 Font-Awesome/Bootstrap 风格的解决方案，您可以执行以下操作：

创建一些新的 CSS 类来表示 lg、2x、3x、4x 和 5x。每个 bootstrap 您想要的屏幕尺寸（例如 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 倍大小的图标，在较小的屏幕上获得常规大小的图标。

或者，您可以像在 bootstrap 解决方案上那样组合其中的一些，就像使用 fa-2x-sm fa-3x-md 会在 md 屏幕尺寸及更大尺寸上为您提供 3 倍大小的图标，sm 屏幕尺寸上的 2 倍大小图标和更小屏幕上的常规尺寸图标。

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

希望对您有所帮助。

在屏幕调整大小时将新的类分配给 bootstrap 元素不起作用

Assigning new classes to bootstrap elements at screen resize not working

javascript

jquery

screen-resolution

JAVASCRIPT 方法一：

JAVASCRIPT 方法二：

使用Javascript方法1：

更简单的 CSS 和媒体查询方法：

在屏幕调整大小时将新的 类 分配给 bootstrap 元素不起作用

Assigning new classes to bootstrap elements at screen resize not working

javascript

jquery

screen-resolution

JAVASCRIPT 方法一：

JAVASCRIPT 方法二：

使用Javascript方法1：

更简单的 CSS 和媒体查询方法：

在屏幕调整大小时将新的类分配给 bootstrap 元素不起作用