Tailwind CSS如何实现响应式布局_利用断点前缀控制元素显示

张开发
• 2026/4/13 8:54:48 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Tailwind CSS如何实现响应式布局_利用断点前缀控制元素显示
hidden 与断点前缀混用会失效因 hidden 等价 display: none 且优先级更高覆盖后续断点显示声明正确做法是仅用断点控制显隐如 hidden md:block lg:hidden。为什么用 hidden 断点前缀会失效因为 hidden 是一个绝对隐藏指令它等价于 display: none而 Tailwind 的断点前缀如 md:block只是在对应断点下设置 display: block但 CSS 优先级规则会让 hidden来自更靠后的类持续生效覆盖掉后续的显示声明。正确做法是只用断点控制显隐不混用 hiddenblock 在默认最小断点生效md:hidden 在中屏及以上隐藏sm:flex 在小屏起显示为 flexlg:hidden 在大屏隐藏 —— 注意顺序越靠后的类权重越高但必须保证逻辑连贯避免写成 hidden md:block lg:hidden这会导致 lg 下仍被 hidden 锁死sm/md/lg 这些断点实际对应多少像素Tailwind 默认断点是移动优先、固定值不是“自动适配设备”具体数值取决于你的配置tailwind.config.js但官方默认是sm: ≥640px比如 iPhone SE 竖屏宽度md: ≥768px常见平板竖屏lg: ≥1024pxiPad 横屏或小笔记本xl: ≥1280px2xl: ≥1536px这些值不是媒体查询里的“设备宽度”而是视口宽度viewport width。如果你项目里改过 theme.screens那所有带前缀的类都会按新值计算别凭经验硬记。立即学习“前端免费学习笔记深入” 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能

更多文章