断点应设在内容坍塌临界点而非设备尺寸，必须配合<meta name="viewport" content="width=device-width, initial-scale=1.0">生效；优先用min-width递进增强，控制在3–4个语义化断点内，单位统一用px，通过DevTools拖动窗口实测确定。
断点不是设备尺寸的快照，而是内容开始“撑不开”或“挤不下”的临界点——设错这里，@media写得再全也没用。
viewport 标签写错，@media 就不触发
iOS Safari 默认视口是 980px，没正确 <meta name="viewport" content="width=device-width, initial-scale=1.0">，手机上根本看不到小屏样式。常见错误包括：
-
width=375或width=1200：硬编码值会让视口固定，失去响应能力 -
user-scalable=no或maximum-scale=1.0：禁用缩放，违反可访问性，且在部分 iOS 版本中导致字体渲染异常 - 标签被构建工具（如 Vite 插件）覆盖或注入了错误值，需检查最终 HTML 的
<head>源码
必须且唯一正确的写法是：<meta name="viewport" content="width=device-width, initial-scale=1.0">。验证方式：Chrome DevTools 切 iPhone 模拟器后，看 <html> 的 clientWidth 是否接近设备逻辑像素（如 iPhone 13 是 390）。
断点该按内容撑开位置定，而不是抄设备列表
设计稿里两列卡片在 783px 开始重叠，但你设了 @media (min-width: 768px)，那中间 15px 就会错位。真实断点要靠眼睛找：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools 响应式模式，拖动宽度滑块，观察文字换行、图片裁切、卡片错位发生的像素值
- 记下那个“自然断裂点”，比如
623px、892px，再向上取整为640px、900px等易维护值 - 别为每个 iPhone 型号加断点（如
390px、430px），这些应由flex/grid+ 相对单位消化
3–4 个全局断点足够：480px（窄屏极限）、768px（内容开始舒展）、1024px（小桌面）、1200px（宽屏）。再多说明布局本身不够弹性。
用 min-width 递进，别混用 max-width 和 min-width
写 @media (max-width: 767px) 和 @media (min-width: 768px) 并列，看似无缝，实则在 767.5px（比如缩放 110% 的 iPad）下两者都不命中，留白或错位——这是最隐蔽的兼容性坑。
- 移动优先：基础样式（小屏）直接写在
@media外，大屏只用@media (min-width: 768px)逐级增强 -
min-width逻辑线性，调试清晰；max-width容易嵌套混乱、覆盖难查 - 避免用
em单位设断点（如48em），多数构建工具不支持变量在@media中展开，CSS 原生也不解析自定义属性
断点只是标尺，真正卡住人的永远是那个“内容刚好看着不对劲”的瞬间
这个点，设计稿不会标，设备参数表里也查不到，只能自己拖着窗口一像素一像素地试。而且，仅靠 width 断点会漏掉横屏和小高度场景——@media (min-width: 1024px) 解决不了 iPad 横屏下文字堆叠的问题，得加 @media (min-width: 768px) and (orientation: landscape)；弹窗这类高度敏感组件，还得补 @media (max-height: 600px) 调 padding 和 font-size。
