最小可用断点组合是768px、1024px和1200px三个断点，覆盖平板竖屏、平板横屏/小桌面、常规桌面，配合移动优先写法（基础样式适配手机，再用min-width逐步增强）实现高效响应式布局。
什么是 media queries 的最小可用断点组合
响应式布局不是靠堆砌一堆断点实现的，而是用最少、最合理的断点覆盖主流设备视口范围。主流做法是只设 768px（平板竖屏起）、1024px（平板横屏/小桌面）和 1200px（常规桌面）三个断点，再多反而增加维护成本和 CSS 体积。
实际项目中更推荐「移动优先」写法：基础样式默认适配手机，再用 @media (min-width: 768px) 逐步增强。这样避免在小屏设备上加载无用的大屏规则。
- 别用设备型号命名断点（如
iphone-se），用视口宽度判断更可靠 - 避免
@media (max-width: 767px)这类“上限断点”，容易因四舍五入或缩放导致边界失效 - Chrome DevTools 的 Device Toolbar 默认启用 DPR 模拟，但真实手机可能有 1.5x 或 2.5x 缩放，建议用
viewportmeta 的width=device-width, initial-scale=1锁定
如何让图片和视频不溢出容器
img 和 video 是响应式中最容易破局的元素——它们默认按原始尺寸渲染，不随父容器缩放。直接加 width: 100% 不够，必须配合 height: auto 防止比例失真。
更稳妥的做法是统一用对象拟合控制：
立即学习“前端免费学习笔记（深入）”；
