使用CSS的@media screen是否不专业？Bootstrap移动端样式修改咨询

完全没这回事儿——用@media screen来定制Bootstrap的移动端样式不仅不是不专业的做法，很多时候还是优化页面体验的必要手段。

为什么这种做法完全合理？ #

• Bootstrap本身就是基于媒体查询构建的：它的栅格系统、响应式组件（比如导航栏折叠、卡片布局）全部依赖@media规则来适配不同屏幕尺寸。你用同样的逻辑去调整样式，本质上和Bootstrap的设计思路是一致的，根本不存在“违背规范”的问题。
• 满足个性化需求：Bootstrap的默认样式和断点是通用方案，未必能完全匹配你的设计稿。比如某个组件在小屏幕下的间距、尺寸不符合要求，或者你需要针对某个特殊屏幕尺寸（比如平板横屏）做定制，自定义媒体查询是最直接的解决方式。

正确使用的注意事项 #

虽然合理，但也要注意避免踩坑：

• 加载顺序优先：确保你的自定义CSS文件在Bootstrap的CSS之后加载，这样你的媒体查询规则才能正确覆盖Bootstrap的默认样式（遵循CSS的优先级规则）。
• 复用Bootstrap断点：如果用Sass/Less版本的Bootstrap，尽量复用框架自带的断点变量（比如$breakpoint-sm、$breakpoint-md），而不是硬写固定像素值。这样你的样式会和Bootstrap的响应式逻辑保持统一，后续维护也更方便。
• 避免过度定制：如果Bootstrap已经提供了对应的响应式类（比如d-sm-none、w-100），优先用这些类来快速实现效果，只有当内置类满足不了时，再用自定义媒体查询。

举个简单例子 #

比如想让一个自定义按钮在小屏幕（Bootstrap的xs断点，即小于576px）下变成全宽：

/* 用硬写像素值的方式 */
@media (max-width: 575.98px) {
  .custom-action-btn {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* 如果用Sass版本的Bootstrap，更推荐复用变量 */
@media (max-width: $breakpoint-sm - 0.02px) {
  .custom-action-btn {
    width: 100%;
    margin-bottom: 1rem;
  }
}

总结一下：说这种做法“不专业”的说法站不住脚，只要你遵循CSS优先级和Bootstrap的响应式逻辑，自定义媒体查询是完全合规且实用的技巧。

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