移动端断点应依据内容坍塌临界点而非设备型号，优先使用min-width实现渐进增强，统一写在css末尾并确保viewport配置正确。
移动端断点不是抄“iPhone 14 宽度 390px”，而是看你的内容在哪塌了——拖动浏览器调试器宽度条，盯着卡片列数、导航折行、文字换行的临界点，那个像素值才是你该写的 @media (min-width: Xpx)。
断点值该取多少？看设计稿容器宽度，不是手机型号
设计师给的主内容区最大宽度是 375px？那就用 @media (min-width: 376px) 开始增强；导航栏在 414px 下开始重叠？断点设 415px，别硬套网上流传的 480px。真实项目里失效最频繁的，就是把断点写成“iPhone SE 是 375px，所以 @media (max-width: 375px)”——结果用户用 Pixel 7（360px）或折叠屏半展开（~500px）时，样式完全错乱。
- 320px：仅用于极简修正（如
padding缩小、图标隐藏），不在这儿写整套布局 - 480px：适合调按钮间距、行高、字体大小，不是“手机起点”
- 768px：多数平板竖屏最小宽度，也是导航切换、卡片列数变化的常见坍塌点
- 1024px：iPad 横屏或小桌面起点，适合开启侧边栏、多栏网格
为什么必须用 min-width 而不是 max-width
max-width 是降级逻辑：默认按桌面渲染，再一层层覆盖小屏样式。小屏设备得下载、解析全部 CSS，白耗带宽；后续断点容易因特异性冲突失效；改一处得同步检查所有 @media (max-width: ...) 块。而 min-width 天然符合渐进增强——小屏只加载基础样式，大屏额外加载增强规则。
- 混用
min-width和max-width极易导致层叠混乱，比如@media (max-width: 768px)和@media (min-width: 768px)在 768px 这一刻可能同时生效或都不生效 - iPad Pro 横屏宽度超 1024px，如果你只写了
@media (max-width: 1024px)，它就掉进“无样式”真空带 - 旧版 Safari（iOS 9.3 以下）不支持
vw/vh在媒体查询中，所以别写@media (min-width: 50vw)
断点写在哪？位置决定是否生效
媒体查询块如果写在 CSS 文件开头，容易被后面未包裹的同类选择器覆盖；如果每个组件都重复写一遍相同断点（比如每个卡片组件都写 @media (min-width: 768px)），后期改断点就得全局搜索替换。
- 统一把媒体查询写在文件末尾，且按移动优先组织：先写基础样式，再集中写增强块
- 避免嵌套在组件内部，除非该组件有完全独立的响应逻辑（如一个只在桌面显示的仪表盘控件）
- 别用
@import或外链多个响应式 CSS 文件——增加 HTTP 请求，拖慢首屏
最容易被忽略的一点：<meta name="viewport"> 配置错误会让所有断点失效
没有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，移动端浏览器会用约 980px 的虚拟视口渲染页面，导致 @media (max-width: 768px) 这类断点完全不匹配。漏掉它，或者写成 user-scalable=no，断点就形同虚设。
真正难的不是写几个 @media，而是判断你的布局在哪个像素值开始“撑不住”。打开浏览器开发者工具，拖动响应式调试器宽度条，眼睛盯着内容——哪里文字折行了、哪里按钮叠一起了、哪里图片被拉变形了，那个宽度就是你的断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
