css响应式断点机制通过“断点前缀+类名”组合实现，如md:text-center；主流框架默认提供sm/md/lg/xl/2xl五级断点，需在配置中定义，未声明则不生成；失效常见原因包括缺失viewport标签、未定义断点名、按需构建未触发类生成。
什么是 CSS 工具类的响应式断点机制
工具类（Utility Classes）本身不带响应式能力，响应式效果靠「断点前缀 + 类名」组合实现。比如 md:text-center 表示在 md 断点及以上才生效，sm:hidden 表示仅在 sm 及以上隐藏元素。本质是预编译出多套规则，按媒体查询条件包裹。
如何定义和使用断点前缀类
主流方案（如 Tailwind）默认提供 sm、md、lg、xl、2xl 五级断点，对应不同 min-width 媒体查询。你写的每个工具类都会被自动复制到各断点作用域下。
-
text-red-500→ 基础层（无断点，始终生效） -
md:text-red-500→ 仅当视口 ≥md断点值时生效 -
hover:md:text-blue-600是非法写法 —— 伪类与断点前缀不能嵌套，必须写成md:hover:text-blue-600（即“在 md 断点下 hover 才触发”） - 自定义断点需在配置文件（如
tailwind.config.js）中修改theme.breakpoints，否则类名不会生成
为什么有些断点类不生效
常见失效不是语法错，而是底层约束没满足：
