Bootstrap 4中能否直接用像素值调用media-breakpoint-up生成媒体查询？

嘿，针对你提出的几个问题，我来逐个拆解清楚：

1. 能否直接用像素值调用media-breakpoint-up？ #

不行哦。Bootstrap 4的media-breakpoint-up这个Sass混合宏（mixin）是专门为预定义的断点键名设计的，它内部会通过键名去全局变量$grid-breakpoints里查找对应的像素值。直接传入像素值（比如900px）的话，它找不到匹配的键，自然无法正常工作。

2. 直接传像素值的写法会不会生成媒体查询？ #

不会生成有效的媒体查询。我们看一下这个mixin的核心逻辑：

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  @media (min-width: map-get($breakpoints, $name)) {
    @content;
  }
}

当你传入900px时，map-get找不到对应的键，会返回null，最终生成的CSS会是@media (min-width: null) { ... }——这是无效的规则，浏览器会直接忽略，等于没写媒体查询。有些Sass编译器甚至会抛出警告提示找不到对应的断点。

3. 必须自定义断点才能生成正确的媒体查询吗？ #

如果想用media-breakpoint-up这个mixin的话，是的。你需要先在$grid-breakpoints里添加自定义断点的键和对应像素值，再用键名调用mixin，比如：

// 自定义断点（保留默认断点的同时新增自定义项）
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  custom-lg: 900px // 添加你的自定义断点
);

// 使用自定义断点调用mixin
@include media-breakpoint-up(custom-lg) {
  body {
    border: 2px solid;
  }
}

这样编译后会生成有效的媒体查询：

@media (min-width: 900px) {
  body {
    border: 2px solid;
  }
}

当然，如果只是临时用一次自定义像素值的媒体查询，不想修改全局断点，直接写原生的CSS媒体查询反而更简单：

@media (min-width: 900px) {
  body {
    border: 2px solid;
  }
}

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