sm:和lg:是“最小宽度触发”而非“仅在某屏”，sm:≥640px、lg:≥1024px生效，二者不互斥；hidden无媒体查询隔离，会压制后续断点display声明；断点值以tailwind.config.js为准，不可硬背默认值。
直接用 sm: 和 lg: 前缀就能控制响应式行为，但它们不是“仅在小屏”或“只在大屏”，而是「最小宽度触发」——写错顺序、混用 hidden、忽略配置文件里的实际断点值，这三处最容易让样式完全不生效。
sm: 和 lg: 的触发逻辑到底是怎样的
sm: 表示视口宽度 ≥ 640px 时生效，lg: 表示 ≥ 1024px 时生效。两者不互斥：在 1200px 下，sm:text-lg 和 lg:text-xl 都会起作用，后者因类名靠后、CSS 权重更高而覆盖前者。
- 默认（无前缀）类在所有尺寸都生效，包括 320px、640px、1200px —— 它是起点，不是“仅手机”
-
sm:不是“只在手机横屏”，而是“从手机横屏开始，一直有效到桌面” -
lg:不会自动取消sm:的设置，只覆盖同名属性（如sm:w-1/2 lg:w-1/3），其他未声明的属性仍沿用sm:或默认值 - 想让样式「只在 sm 到 lg 之间生效」，得组合：
sm:block lg:hidden（先小屏显示，大屏隐藏），不能依赖hidden开头
为什么 hidden + 断点前缀经常失效
hidden 等价于 display: none，它不是响应式类，而是一个绝对指令。一旦出现，就会压制后续所有 md:block、lg:block 这类 display 声明，因为 CSS 解析按顺序执行，且 hidden 没有媒体查询隔离。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 错误写法：
hidden md:block lg:hidden→ 在 lg 尺寸下依然被hidden锁死 - 正确写法：
sm:block lg:hidden→ 小屏起显示，大屏起隐藏；若需默认隐藏，就不要写任何默认类，只靠断点驱动 - SSR 场景下，如果服务端直出
hidden，JS 加载后再加sm:block，可能造成内容闪动 —— 关键元素建议服务端根据 UA 或预设视口判断后直出对应断点类
断点值不是固定的，必须查配置
你项目里 tailwind.config.js 中的 theme.screens 才是真实依据。硬背 “sm 是 640px” 没用，改过配置就全错。
- 默认值只是参考：
{ sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' } - 如果团队把
md改成'md': '800px'，那所有md:类都从 800px 起效，和 768 无关 - 浏览器模拟器标着 “iPad” 不代表视口真有 1024px —— 直接运行
window.innerWidth看真实值，比看设备标签靠谱得多 - iframe 内嵌、WebView 容器等场景下，
matchMedia可能读不到真实视口，断点会静默失效
常见布局类的典型断点搭配
栅格列数、Flex 方向、字体与间距是最常配合 sm:/lg: 使用的三类，它们覆盖了从手机横屏到中型桌面的关键分界，无需过度细化。
- 列数控制：
grid-cols-1 sm:grid-cols-2 lg:grid-cols-4—— 手机单列，小屏双列，大屏四列 - Flex 排列：
flex flex-col sm:flex-row lg:flex-col—— 小屏横排导航，大屏切回竖排侧边栏 - 字体与内边距：
text-base sm:text-lg lg:text-xl p-4 sm:p-6 lg:p-8—— 层级递进，避免视觉跳跃 - 别写
sm:hidden lg:block期望「只在大屏显示」—— 768–1023px（md 尺寸）会真空，必须补md:block或改用sm:block lg:hidden反向控制
最常被跳过的动作是打开 tailwind.config.js 确认 theme.screens，而不是凭记忆写类名；其次是忘了移动端必须有 <meta name="viewport" content="width=device-width, initial-scale=1">，否则所有断点数值都会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
