移动优先指先写手机默认样式，再用min-width媒体查询逐级覆盖大屏；断点按内容需求设定并升序排列；慎用rem/em，优先clamp()实现流体字体；确保触摸目标≥44px、禁用user-scalable=no、图片max-width:100%；交互反馈需适配触屏，真机测试不可替代。
移动端样式写在前面，用 @media (min-width: 768px) 往大屏幕加
移动优先不是口号，是书写顺序和断点逻辑：先写默认样式（针对手机），再用 @media (min-width: 768px) 覆盖中屏，@media (min-width: 1024px) 覆盖桌面。这样小设备只加载基础规则，大设备多加载一层覆盖，符合渐进增强逻辑。
常见错误是反过来——先写桌面样式，再用 @media (max-width: 767px) 降级适配手机。结果是小屏设备被迫解析并丢弃大量无用的桌面 CSS，白耗带宽和渲染时间。
- 断点值别硬套“常见值”，以内容撑开为准，比如某卡片在 680px 就挤不下了，就设
@media (min-width: 681px) -
min-width断点必须按升序排列，否则后写的可能被前写的同权重规则覆盖（CSS 层叠规则） - 避免在媒体查询里重复声明已有的通用属性，比如
font-size在默认样式里设了16px，中屏只需改18px，不用再写line-height或color
默认样式要真能跑通小屏，不是“占位符”
很多人的“移动优先”只是把 width: 100% 和 flex-direction: column 往上一贴，但没验证实际交互是否可用。比如默认按钮没留足够点击热区、文字没做最小字号兜底、表单控件没适配 iOS 输入法弹起高度。
- 触摸目标至少
44px × 44px，用min-height和padding保证，别只靠font-size - 禁用
user-scalable=no，也别设死viewport的initial-scale，让系统缩放机制生效 - 图片默认用
max-width: 100%; height: auto;，否则窄屏会横向溢出，触发非预期滚动
慎用 rem 或 em 做响应式字体，优先用 clamp()
rem 依赖根字体大小，而 html { font-size: 16px } 在小屏上可能被用户缩放打乱；em 容易嵌套失控。用 clamp(1rem, 4vw, 1.5rem) 更直接：它能在最小值、视口单位、最大值之间平滑过渡，且无需 JS 或媒体查询。
立即学习“前端免费学习笔记（深入）”；
- 别写
clamp(12px, 2.5vw, 16px)这种绝对像素值——iOS Safari 对px在clamp()中的支持曾有 bug，统一用rem或em更稳 - 如果必须兼容旧浏览器（如 IE），就退回用媒体查询 +
rem，但注意html根字号别用 JS 动态算，否则 SSR 或首屏渲染会错乱 -
clamp()的中间值建议用vw，不是vmin，因为竖屏时vmin可能过小，导致文字突然变 tiny
伪类和焦点状态在小屏上容易失效，得单独加固
像 :hover 在触摸设备上基本不可靠，:focus 在 iOS 上常因虚拟键盘弹出而丢失。默认样式里写的 button:hover { opacity: 0.8; } 到手机上等于没写。
- 把交互反馈移到
:active或:focus-visible，并确保outline不被outline: none全局干掉 - 用
@media (hover: hover) and (pointer: fine)包裹纯鼠标悬停效果，避免触屏误触发 - 测试时真机连 DevTools，别只靠 Chrome 模拟器——模拟器不会触发真实触摸事件链，也看不到 iOS 键盘遮挡问题
