Question

是否可以获得当前的屏幕模式而无需编写适用于媒体查询的功能？

e.g。我有一个container-fluid div，类chartContainer。

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

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

是否有引导方法可以找到它，而无需编写自己的函数？

e.g。我会做这样的事情，这是快速和肮脏的，但如果窗口大小改变应该工作：

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>

Answer 2

如果你想在JS中获得bootstrap的断点，请使用：

var lg = window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-lg');
if (window.matchMedia("(min-width: "+lg+")").matches) {
  /* do something */
}

重复其他断点并根据您的需要进行调整，

这是Availbale variables（自定义属性）

的列表

媒体查询会更好，你可以使用它：

@media (min-width: var(--breakpoint-lg) ) { ...

Bootstrap - 获取当前屏幕模式

2 个答案: