移动端优先指基础样式默认适配小屏幕，用min-width媒体查询向上增强；禁用user-scalable=no；优先使用rem/vw；图片等元素需设width:100%和max-width:100%；字体用clamp()；点击区≥44px；flex/grid默认行为已适配移动端。
移动端样式直接写在常规CSS里，不加@media
移动端优先不是靠媒体查询“先写手机再写桌面”，而是把基础样式默认适配小屏幕，只在需要时用 @media (min-width: 768px) 等向上覆盖。浏览器一加载就渲染可用的移动端样式，避免“先错后修”——比如先显示挤成一团的文字，再等媒体查询生效重排。
常见错误是反着来：先把大屏样式写满，再用 @media (max-width: 767px) 补手机，结果在旧安卓 WebView 或某些邮件客户端里，媒体查询不触发，用户看到的就是崩掉的大屏布局。
- 所有字体、内边距、宽度值优先用
rem或vw，避免固定px（如font-size: 16px改为font-size: 1rem） -
width: 100%和max-width: 100%必须配合图片、iframe、表格等元素，否则它们会溢出容器 - 禁用
user-scalable=no的<meta name="viewport">，保留用户双指缩放能力，这是可访问性底线
桌面端增强用 min-width 媒体查询，别用 max-width
写 @media (min-width: 768px) 而不是 @media (max-width: 767px)。前者是“当屏幕够宽时才启用”，语义清晰；后者是“当屏幕不够宽时才启用”，容易漏掉边界情况（比如 767.5px 宽的设备可能不匹配任何规则）。
实际项目中，断点建议按设备能力设，而不是照搬“iPhone宽度”：
@media (min-width: 768px) → 平板横屏及以上（有足够空间做两栏）
@media (min-width: 1024px) → 小桌面（可安全加侧边栏或固定导航）
@media (min-width: 1280px) → 主流桌面（适合最大内容宽度限制）
- 每个
@media块只覆盖必要属性，比如只改grid-template-columns，别重复写font-size或margin - 避免嵌套媒体查询（Sass 中的
@media嵌套），会导致 CSS 体积膨胀且难以调试 - 用
prefers-reduced-motion等特性查询补充，但把它当作增强，不是替代响应式主干
flexbox 和 grid 默认行为天然适配移动端
display: flex 默认单行、从左到右、不换行，正好符合小屏阅读流；display: grid 默认单列，也无需额外设置。刻意用 flex-wrap: wrap 或 grid-template-columns: repeat(3, 1fr) 反而是为大屏准备的。
典型误操作：给按钮组加 display: flex 后，又立刻写 flex-wrap: wrap —— 手机上本就不该换行，硬加反而导致按钮被切开或错位。
- 移动端用
flex-direction: column布局主内容区，桌面端再用@media改成row -
grid的auto-fit+minmax()（如grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))）在小屏自动退化为单列，不用媒体查询也能响应 - 慎用
float，它在 flex/grid 主导的响应式中既难维护又易触发怪异清除问题
字体和点击目标尺寸必须满足移动端最小可触控标准
WCAG 要求可点击区域至少 44px × 44px，iOS Safari 默认把小于这个尺寸的点击区放大，但 Android Chrome 不一定。不能依赖浏览器自动修正。
字体太小不仅看不清，还会触发 iOS 的自动缩放（页面变小、横向滚动条出现），破坏布局完整性。
- 用
font-size: clamp(1rem, 2.5vw, 1.25rem)替代固定值，确保小屏不糊、大屏不撑 - 按钮、链接的
padding至少设到0.5rem（约 8px），再结合min-height: 44px保底 - 表单控件（
input、select）必须显式设height或min-height，否则在部分安卓浏览器中高度异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
