移动优先策略是最有效的响应式设计方式：先为手机写基础样式，再用min-width媒体查询向上增强；HTML语义化、图片自适应、表单触控友好；使用rem/em/%等相对单位；断点依内容而非设备设定；交互与视觉增强按需渐进添加。
采用移动优先策略是兼顾桌面和移动响应式设计最有效的方式。核心思路是：先为最小屏幕（如手机）写基础样式，再用 @media 查询逐步增强适配更大屏幕，而非从桌面版倒推适配移动端。
移动优先的HTML结构要简洁语义化
避免为不同设备写多套DOM，统一用语义化标签（如 header、nav、main），不依赖隐藏/显示切换内容。这样既利于SEO，也减少CSS维护成本。
- 导航用单层
<nav>+<ul>，移动端默认垂直堆叠 - 图片使用
max-width: 100%; height: auto;防止溢出容器 - 表单控件保持原生尺寸，不强制设固定宽高，确保触控友好
用相对单位和流式布局打底
所有基础样式（字体、间距、容器宽度）优先使用 rem、em、% 或 ch，避免 px 锁死尺寸。容器用 max-width + margin: 0 auto 实现居中弹性宽度。
- 根字体设为
font-size: 16px;，后续用1.25rem等表达比例关系 - 段落行高用
line-height: 1.6;（无单位），随字体缩放自然调整 - 栅格系统可用 CSS Grid 或 Flexbox，避免浮动和固定列宽
断点选择以内容为准，不是设备型号
断点应基于页面内容“撑不开”或“太松散”的临界点，比如文字换行异常、卡片拥挤、导航折行等，而不是套用 iPhone 14 或 iPad 尺寸。
立即学习“前端免费学习笔记（深入）”；
- 常用断点可设为
480px（小屏）、768px（平板横屏）、1024px（桌面窄屏）、1280px（宽屏） - 用
min-width媒体查询向上增强：@media (min-width: 768px) { ... } - 关键组件（如导航栏）在断点处重排：移动端汉堡菜单 → 平板横排 → 桌面多级展开
交互与视觉增强按需叠加
触摸操作、悬停效果、动画等增强体验的特性，应在大屏断点中渐进添加，不破坏小屏基础功能。
- 悬停状态仅在
@media (hover: hover)下启用，避免误触 - 过渡动画用
prefers-reduced-motion降级处理 - 字体大小在桌面端可适度增大（如正文从
1rem提至1.125rem），提升可读性
