手机上 container 显示宽屏样式，因 CSS 框架默认断点设置（如 Bootstrap xs 下 100% 宽但 padding 未重置、Tailwind 默认仅 sm+ 设 max-width），需用响应式工具类精准覆盖而非全局修改。
为什么 container 在手机上还显示宽屏样式？
多数 CSS 框架（如 Bootstrap、Tailwind）的 container 默认只在中大断点（如 md 或 lg）生效，小屏幕下可能退化为 100% 宽度但内部 padding 未重置，或仍套用桌面端 max-width，导致内容被横向挤压、文字溢出、按钮错位。
- 检查框架文档确认默认断点值：Bootstrap 5 的
container在xs下是 100%，但container-fluid才真·全宽；Tailwind 的container默认仅在sm:及以上设 max-width - 用浏览器开发者工具选中元素，看 computed 样式里
max-width和padding-left/right是否在320px屏宽下仍为桌面值 - 别直接覆盖
container全局样式——优先用响应式前缀工具类，比如md:mx-4 sm:mx-6，而非写媒体查询
grid-cols-3 在 iPhone 上变成单列但没留白？
响应式栅格工具类（如 Tailwind 的 grid-cols-*、Bootstrap 的 row-cols-*）只控制列数，不自动处理 gap、padding 或子项最小宽度。iPhone 小屏下强行三列会导致子项宽度不足、文字折行混乱、触摸目标过小。
- 必须配合间距类：比如
grid-cols-3 sm:grid-cols-1 gap-4 sm:gap-2，让小屏单列且减小间隙 - 对卡片/按钮等交互元素，加
min-w-[120px]或flex-shrink-0防止被压缩到无法点击 - 注意 Safari 对
grid的兼容性：iOS 14.5+ 支持完整规范，但老版本可能需display: -ms-grid回退（不过现在基本可忽略）
用了 hidden md:block，但安卓微信里还是显示？
微信内置浏览器（X5 内核）对某些响应式工具类解析异常，尤其当页面未声明视口或 CSS 被动态注入时，hidden 类可能被忽略，或媒体查询断点计算偏移。
- 强制加上
<meta name="viewport" content="width=device-width, initial-scale=1">，缺这个，所有响应式都失效 - 避免嵌套多层响应式类，比如
hidden sm:block md:hidden lg:block——X5 内核容易漏解析，改用明确断点：hidden sm:block+ 单独写md:hidden到同个元素 - 真遇到不生效，用内联
style="display:none"临时兜底，但只针对关键遮罩层，别滥用
自定义断点和框架冲突怎么办？
当你在 Tailwind 的 tailwind.config.js 里新增 xs: '320px'，但框架组件（如第三方日期选择器）仍按默认 sm: '640px' 响应，就会出现布局撕裂：左侧菜单收起，右侧表格却没重排。
立即学习“前端免费学习笔记（深入）”；
- 不要覆盖框架默认断点名（如把
sm改成375px），而是在新名字下扩展，比如xs: '320px', xsm: '375px'，再用xs:hidden xsm:block - 对引入的 UI 组件库（如 Headless UI、Mantine），查其源码或文档是否支持传入
breakpointprop，优先用 API 控制，而非硬套工具类 - 如果必须覆盖全局断点，确保所有依赖包都已升级到支持配置化的版本（例如 Tailwind v3.3+ 支持
theme.extend.screens安全扩展）
移动端适配不是加一堆 sm: 就完事——得盯着真机的滚动卡顿、点击热区、字体可读性这些细节。工具类只是杠杆，支点是你对设备实际渲染行为的理解。
