断点如何选择
断点不是按设备型号定的（iPhone 14 今天有明天换），而是按内容定：当布局“挤破了”就加一个断点。实践中约定俗成的档位：480（小手机）、768（平板竖屏）、1024（平板横屏/小笔电）、1440（桌面大屏）。
更好的做法是“内容驱动断点”：把窗口从大到小拖，卡片挤到难看的瞬间打住，记录宽度，那就是断点位置。
- 常用档位：480 / 768 / 1024 / 1440，按需增减
- 断点数量越少越好，每多一个断点就多一份维护成本
- 优先用“内容驱动断点”，而不是背设备分辨率表
CSS
/* 用 CSS 变量统一管理断点字号（变量本身不能放进 @media，这里演示取值策略） */ :root { --pad: 16px; } /* 断点不只改宽度，也改间距、字号、圆角 —— 整套体验跟着变 */ .grid { display: grid; gap: var(--pad); grid-template-columns: 1fr; } @media (min-width: 768px) { :root { --pad: 24px; } .grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1200px) { :root { --pad: 32px; } .grid { grid-template-columns: 1fr 1fr 1fr; } }
本节要点断点由内容决定而非设备型号；统一档位 + CSS 变量，维护成本最低。
