Bootstrap如何无需自定义媒体查询函数获取当前屏幕模式？

完全不需要编写自定义媒体查询函数，Bootstrap自带的断点系统和工具就能轻松搞定你的需求——只让.chartContainer的padding样式在**md及以上屏幕（也就是非xs、sm的尺寸）**生效。下面给你两种最直接的实现方式：

方法1：用Bootstrap Sass混合宏（推荐，如果你用Sass预编译） #

如果你项目里用了Bootstrap的Sass版本，可以直接用官方提供的media-breakpoint-up混合宏，它会自动帮你生成对应断点的媒体查询，不用手动写像素值：

.chartContainer {
  // 仅在md及以上屏幕应用样式
  @include media-breakpoint-up(md) {
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 120px;
    padding-right: 120px;
  }
}

这个混合宏会自动对应Bootstrap默认的md断点（≥768px），如果你的项目自定义了断点数值，它也会自动适配，完全符合原生Bootstrap的逻辑。

方法2：纯CSS直接用Bootstrap官方断点数值 #

如果不用Sass，直接写纯CSS的话，也可以用Bootstrap官方定义的断点数值来写媒体查询，这也属于遵循Bootstrap原生规则，不算自定义函数：

// Bootstrap默认md断点为≥768px，对应非xs、sm屏幕
@media (min-width: 768px) {
  .chartContainer {
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 120px;
    padding-right: 120px;
  }
}

这里的768px是Bootstrap官方指定的md断点最小值，只要你不修改Bootstrap的默认断点设置，这个写法就完全可靠。

额外小提示 #

如果你不想写自定义类，也可以用Bootstrap的响应式padding工具类组合实现：比如在元素上直接加md:pt-5 md:pb-12 md:pl-30 md:pr-30（不过注意Bootstrap的默认padding工具类是基于spacing变量的，如果你需要精确的20px、120px这类数值，可能还是自定义类更方便）。

内容的提问来源于stack exchange，提问作者Black