移动优先需从基础样式起步并按断点升序增强，而非仅加viewport或误用桌面断点覆盖移动端；Bootstrap 5默认移动优先，Tailwind的sm:表示≥640px增强，自定义断点须严格升序排列。
移动优先不是加个 viewport 就完事
很多开发者以为在 <head> 里塞一行 <meta name="viewport" content="width=device-width, initial-scale=1"> 就算完成了移动优先——其实这只是起点。真正的问题在于：框架默认的 CSS 规则往往从桌面断点开始写，@media (min-width: 768px) 这类“桌面增强”规则会覆盖移动端基础样式，导致小屏下布局错乱、字体过小、点击区域过窄。
Bootstrap 5 默认就是移动优先，但得关掉旧习惯
Bootstrap 5 移除了所有 .col-xs-* 类，所有 .col-*（如 .col-6）直接作用于 超小屏幕（<576px），这是移动优先的体现。但容易踩坑的是：
- 误用
.col-md-6代替.col-6：结果是手机上变成单列堆叠，因为没定义超小屏行为 - 自定义媒体查询仍写
@media (min-width: 768px)：这没问题，但若同时写了@media (max-width: 767.98px)来“重置”，反而破坏响应流 - 用
!important强行覆盖框架断点样式：会导致小屏下样式不可预测，尤其在嵌套组件中
.card {
padding: 1rem; /* 手机默认 */
}
@media (min-width: 992px) {
.card {
padding: 1.5rem; /* 大屏增强，不干扰小屏 */
}
}Tailwind 的 sm: 不是“小屏”，而是“最小断点”
Tailwind 的断点前缀 sm: 对应 @media (min-width: 640px)，它不是“仅在小屏生效”，而是“≥640px 时生效”。这意味着：
-
text-sm是基础字体大小（无前缀），适用于所有尺寸 -
sm:text-base是“640px 起用更大字号”，属于增强，不是降级 - 不要写
md:hidden sm:block：这会让 640–767px 显示、768px+ 隐藏，逻辑反了；应写hidden md:block（默认隐藏，≥768px 显示）
<div class="text-sm sm:text-base md:text-lg"> 文字随屏幕增大逐步变大 </div>
自定义框架时，断点顺序和命名必须严格递增
如果你基于 PostCSS 或 Sass 自建响应系统，断点变量顺序决定编译后 CSS 的层叠优先级。错误示例：
立即学习“前端免费学习笔记（深入）”；
$breakpoints: ( 'sm': 576px, 'lg': 992px, 'md': 768px // ❌ 顺序错，编译后 md 规则会覆盖 lg );
正确做法是按像素值升序排列，且命名反映实际含义（比如 xs sm md）：
$breakpoints: ( 'xs': 0, 'sm': 576px, 'md': 768px, 'lg': 992px, 'xl': 1200px );
否则，即使你写了 @include media-breakpoint-up(lg)，生成的 CSS 也可能被更晚声明但更宽泛的 md 规则覆盖。
移动优先真正的难点不在语法，而在于思维切换：把小屏当作唯一基准，所有大屏规则都是“额外添加”，而不是“条件覆盖”。一旦在框架里混用 max-width 降级写法和 min-width 增强写法，样式就会进入不可维护状态。
