响应式设计的核心是「在什么时候切换布局」，也就是断点（breakpoint）。断点选错会导致某个宽度区间内的设备看到错乱的布局。

2026 年推荐的断点：

• 360px：小屏安卓手机（小米、华为入门款），最小适配宽度
• 393px：iPhone 16e / 17 竖屏主流宽度
• 430px：iPhone 17 Air / Pro Max 竖屏宽度
• 480px：大屏手机横屏临界
• 768px：iPad 竖屏 / 大屏手机横屏
• 1024px：iPad 横屏 / 笔记本最小宽度
• 1280px：标准桌面
• 1440px：大屏桌面 / Retina 笔记本
• 1920px：全高清显示器

两种策略，选一个：

移动优先（推荐）：先写最窄屏的样式作为基础，用 min-width 往上加断点。适合新项目，CSS 更简洁。

/* 基础：手机 */
.card { width: 100%; }

/* 平板及以上 */
@media (min-width: 768px) {
  .card { width: 50%; }
}

/* 桌面及以上 */
@media (min-width: 1024px) {
  .card { width: 33.33%; }
}

桌面优先：先写最宽屏的样式，用 max-width 往下加断点。适合改造旧项目，但容易产生样式覆盖问题。

三个常见误区：

• 按具体机型设断点：不要为 iPhone 17 单独设 402px 断点，机型太多。按内容自然折行的位置设断点。
• 断点太多：超过 5 个断点维护成本高。通常是 4 个：手机、平板、小桌面、大桌面。
• 忽略横屏：手机横屏宽度可能落在平板区间，用 orientation 媒体查询单独处理。

在下方预览器输入网址，同时加载 393 / 768 / 1280 三个宽度，一眼看出断点切换是否自然。