只靠固定断点无法真正适配不同手机屏幕，必须结合viewport控制、相对单位和弹性容器约束；viewport标签缺失或错误会导致iOS按980px渲染、字体模糊、点击错位，width=device-width和initial-scale=1缺一不可。
直接说结论：只靠固定断点（比如 @media (max-width: 767px)）没法真正适配不同尺寸的手机屏幕，必须结合视口控制、相对单位和容器弹性约束，否则在 iPhone SE 和 Pixel 7 上表现会明显不一致。
viewport meta 标签漏写或写错，所有响应式都白搭
很多人在手机上调试时发现布局“缩得太小”或“横向滚动”，根本原因不是 CSS 写错了，而是没加或加错了 <meta name="viewport" content="width=device-width, initial-scale=1.0">。
- 缺这个标签：iOS Safari 会默认按 980px 渲染，再缩放显示，导致字体糊、点击区域小
-
width=device-width必须写，不能写成width=375或其他固定值——不同手机物理像素宽度差异极大（iPhone 15 是 390px，Redmi Note 13 是 412px） - 如果用了
user-scalable=no，会影响可访问性，除非有强业务理由，否则别加
用 rem + viewport 缩放比替代 px，避免“小屏字太小、大屏字太大”
单纯用 px 设置字体或间距，在 320px 宽的旧安卓机和 430px 宽的 iPhone 15 Pro 上体验割裂；em 又容易嵌套失控。推荐用 rem 配合 JS 动态设置根字号。
- 基础做法：在
<html>上用 JS 计算document.documentElement.style.fontSize = `${window.innerWidth / 375 * 16}px`（以 375px 为基准，16px 为 1rem） - 更稳妥的做法：用
clamp(14px, 4vw, 18px)直接定义字体大小，既防过小也防过大 - 慎用
vw做 padding/margin：某些 Android 浏览器在横屏切换时会卡住 vw 计算，导致布局跳变
flex-wrap + max-width + width: 100% 组合，防止卡片/按钮在窄屏溢出
常见错误是给卡片设 width: 300px，结果在 320px 屏上横向滚动。这不是媒体查询能解决的，得从容器行为入手。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
width: 100%和max-width: 100%，否则 flex 子项可能撑破父级 - 多列布局优先用
flex-wrap: wrap，而不是靠@media切换flex-direction——前者能实时响应，后者只在断点触发 - 子项用
flex: 0 0 calc(50% - 8px)比写死width: 50%更稳，留出gap空间，避免换行错位 - 图片必须加
max-width: 100%; height: auto，否则原始尺寸 > 屏幕宽度时会破坏流式布局
别迷信“标准断点”，真实手机屏幕宽度远比文档写的杂
所谓“手机断点 ≤767px”只是粗略归类，实际 Chrome DevTools 的 device list 里，主流手机宽度从 320px（iPhone SE）到 430px（Pixel 7）不等，且存在刘海、圆角、状态栏遮挡等干扰。
- 断点建议按内容需求设，而不是设备型号：比如文字行宽超过 65 字符就该换行，那就用
@media (min-width: 360px)调整font-size或line-height - 用
screen and (pointer: coarse)区分触控精度，比单纯看宽度更能适配低端安卓机的误触问题 - 真机测试比模拟器重要：iOS 的 Safe Area inset 在模拟器里常被忽略，导致底部按钮被遮挡
真实适配难点不在写多少媒体查询，而在理解“手机屏幕”本身不是一组离散值，而是一个连续变量区间——所有固定值策略（包括断点、px、固定栅格）都需要被弹性逻辑兜底。
