如何为媒体查询设置专属值？Bootstrap移动端优先断点适配问题

嘿，刚好对Bootstrap的断点策略很熟悉，来帮你理清楚这个问题～

首先要明确：你用的Bootstrap是移动端优先的设计思路，这意味着默认写的CSS样式会先适配小屏幕，然后通过min-width的媒体查询，逐步给更大的屏幕覆盖样式。所以你原本的写法其实是完全正确的：

/* 默认（小屏幕 <768px）样式：红色 */
.red-when-small-green-when-not-small { color: red; } 

/* 大屏幕 ≥768px 时覆盖为绿色 */
@media only screen and (min-width: 768px) { 
  .red-when-small-green-when-not-small { color: green; } 
}

这里的默认红色样式，就自动对应了你说的「屏幕宽度最大为767.999...px」的场景，根本不需要额外写max-width的媒体查询——这也是移动端优先策略的优势：代码更简洁，逻辑更清晰。

不过如果你确实想要显式写出小屏幕的区间（比如团队规范要求，或者为了代码可读性），推荐用767.98px作为上限，而不是你写的超长小数。原因是浏览器的浮点精度问题，超长小数可能会触发意外的渲染Bug，Bootstrap官方也是用767.98px作为sm断点的上限，这样能完美避开边界值的冲突：

/* 显式定义小屏幕（<768px）样式 */
@media only screen and (max-width: 767.98px) {
  .red-when-small-green-when-not-small {
    color: red;
  }
}

/* 大屏幕（≥768px）样式 */
@media only screen and (min-width: 768px) {
  .red-when-small-green-when-not-small {
    color: green;
  }
}

另外你提到「原本应该为绿色的样式」可能有问题？可以排查这几个常见坑：

• 检查选择器优先级：如果默认样式用了更高优先级的写法（比如带父元素的选择器、!important），媒体查询里的选择器优先级也要跟上，不然会被覆盖
• 用浏览器开发者工具确认窗口宽度：有时候视觉上觉得屏幕够大，但实际像素宽度没到768px（比如浏览器有侧边栏），用设备模拟器能精准查看
• 查看元素样式面板：看看是不是有其他CSS规则（比如第三方组件的样式）把绿色覆盖了，被划掉的规则就是被覆盖的

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