javascript - Bootstrap - 获取当前屏幕模式

Question

是否可以获取当前屏幕模式而无需编写与媒体查询一起使用的函数？

例如我有一个带有 chartContainer 类的 container-fluid div。

.chartContainer {
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 120px;
    padding-right: 120px;
}

但如果屏幕尺寸不是 xs 或 sm，我只需要类 chartContainer。

是否有 Bootstrap 方法可以找到这个问题，而无需编写自己的函数？

例如我会做这样的事情，这既快又脏，但如果窗口大小发生变化应该可以工作:

setInterval(function() {
    if (BOOTSTRAP_CURRENT_SCREEN_MODE == 'xs' || BOOTSTRAP_CURRENT_SCREEN_MODE == 'sm') {
        $(".container-fluid").removeClass("chartContainer");
    } else {
        $(".container-fluid").addClass("chartContainer");
    }
},100); 

有类似 BOOTSTRAP_CURRENT_SCREEN_MODE 的东西吗？ 我如何以最好的方式实现我的目标？

Answer 1

媒体查询是实现此目的的最简单方法。

/* col-md-* and col-lg-* */

@media (min-width: 992px) {
  .chartContainer {
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 120px;
    padding-right: 120px;
  }
}


/* col-xs-* and col-sm-* */

@media (max-width: 991px) {
  .chartContainer {
    /* some other measurements here */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

<div class="chartContainer">...</div>