结论：断点应依据布局实际坍塌位置而非手机型号设定，优先使用min-width并基于设计稿容器宽度确定具体数值，通过浏览器调试器实测坍塌临界点。
直接说结论：别按手机型号写断点，盯住你的布局在哪塌陷——比如按钮挤成一行、文字换行异常、图片被裁切，那个宽度才是你该设的 @media 点。
断点值该取多少？看容器不是看设备
网上流传的 320px、480px、768px 不是“标准答案”，而是历史遗留的常见坍塌临界点。实际项目里，真正该用的数值来自你的设计稿容器宽度：
- 设计师给的卡片区域最大宽度是
375px？那就用@media (min-width: 376px)开始增强 - 导航栏在
414px宽度下开始重叠？断点就设415px，而不是硬套480px - iPhone SE（
375px）和部分安卓小屏（360px）差异很小，统一按最小内容可读宽度处理，通常320px只做极简修正（如 padding 缩小、字体微调），不在这儿写整套布局
用 min-width 还是 max-width？优先选前者
min-width 更稳定，也更符合“移动优先”逻辑。你先写默认（小屏）样式，再用 @media (min-width: ...) 逐步加宽适配。容易踩的坑：
- 混用
min-width和max-width会导致层叠混乱，比如@media (max-width: 768px)和@media (min-width: 768px)在768px这一刻可能同时生效或都不生效 - 旧版 Safari（iOS 9.3 以下）不支持
vw/vh在媒体查询中，所以别写@media (min-width: 50vw) - 用
em写断点风险高：用户缩放页面或系统设置了非默认字号，48em可能对应45px或52px，而你设计稿是按768px量的 —— 直接写px
怎么避免样式被覆盖或失效？位置和顺序很关键
媒体查询块必须放在它所修改的选择器定义之后，且所有同类断点建议集中写在 CSS 文件末尾。否则：
立即学习“前端免费学习笔记（深入）”；
- 如果
.header { width: 100%; }写在文件开头，而@media (min-width: 768px) { .header { width: 80%; } }写在中间，后面又有一段未包裹的.header { width: 90%; }，那大屏下实际生效的是90%，不是你想要的80% - 每个组件都重复写一遍
@media (min-width: 768px)，后期改断点要搜遍全项目；统一收口到全局响应式区块里，维护成本低得多 - iPad Pro 横屏宽度超
1024px，如果你只写了@media (max-width: 1024px)，那它就掉进“无样式”真空带 —— 改用min-width并把断点设在真实布局转折处（比如1025px）
真正难的不是写几个 @media，而是判断你的布局在哪个像素值开始“撑不住”。打开浏览器开发者工具，拖动响应式调试器宽度条，眼睛盯着内容——哪里文字折行了、哪里按钮叠一起了、哪里图片被拉变形了，那个宽度就是你的断点。别猜，要测。
