你可能会说
我不知道该在什么宽度让布局从两列变成一列。
断点是响应式设计中布局发生切换的屏幕宽度阈值，如 640px、768px、1024px。
响应式设计中布局发生切换的那个屏幕宽度值。常见的有 768px（平板）、1024px（桌面）。
生活类比
像衣服尺码的分界线——身高超过 170 就穿 L 码。屏幕超过断点就换布局。
🎮 动手试试
👇 点击断点查看布局切换
关于「断点」，以下哪个描述最准确？
你可以这样告诉 AI
帮我设定响应式断点：sm(640px) 单列→双列，md(768px) 显示侧边栏，lg(1024px) 三列网格，xl(1280px) 最大宽度限制。
媒体查询是 CSS 语法（@media），断点是你选择的具体宽度数值。断点是「在哪切」，媒体查询是「怎么切」。
断点应该基于「内容在哪里看起来不对」来选，而不是死记设备型号宽度。
规划响应式策略
确定 640px（手机横屏）、768px（平板）、1024px（桌面）等断点，让布局在各设备上自然过渡。
和 AI 协作时
想让 AI 设断点时，直接说「在 768px 断点把两列变成单列，1024px 以上显示侧边栏」。
使用容器查询时
如果已经在用 @container 容器查询（根据父容器而非屏幕宽度），就不需要传统的视口断点。
与响应式无关的项目
不需要做多端适配的项目，定死一个宽度就行，不用考虑断点。
响应式设计中布局发生切换的那个屏幕宽度值。常见的有 768px（平板）、1024px（桌面）。
像衣服尺码的分界线——身高超过 170 就穿 L 码。屏幕超过断点就换布局。
和 AI 沟通时提到「在 768px 断点处变成单列」，就是在指定切换时机。