手机端流量早已超过桌面端。响应式设计用一套 HTML 适配所有屏幕，是建站的默认标准。本讲覆盖视口机制、媒体查询、流式布局与移动优先策略，让每个客户在任何设备上都有好体验。
文字溢出、按钮点不到、图片变形，用户一秒划走，转化直接归零。
搜索引擎对移动体验差的站点降权，意味着手机端搜索几乎搜不到你。
桌面版、手机版两套页面分别维护，改个价格要同步三处，成本翻倍还容易漏。
移动互联网主力入口，信息流与搜索的绝对主战场。
办公、深度阅读与决策场景的主力，体验同样重要。
平板、折叠屏与车载屏，跨屏一致性的新挑战。
适配手段各有适用场景，组合使用效果最佳。
| 手段 | 适用场景 | 注意 |
|---|---|---|
| 媒体查询 | 断点级布局切换 | 按内容换行定断点 |
| 流式布局（% / flex / grid） | 栅格随宽度伸缩 | 设 min/max 防极端拉伸 |
| clamp() 字号 | 字号随视口平滑变化 | 设置合理上下限 |
| srcset / picture | 按屏幕加载图片 | 避免移动端下载大图 |
| 容器查询 container | 按父容器而非视口适配 | 组件级自适应利器 |
| 移动优先 + 增强 | 所有新项目默认 | 先小屏后大屏 |
客户可能用手机、电脑、平板看你的官网，响应式保证第一印象不翻车。
手机下单是主流，商品卡片、购物车、结算在移动端的体验决定转化。
碎片化阅读集中在手机端，正文排版、字号、阅读节奏都要为小屏优化。
营销落地页的填写体验直接决定询盘量，移动端表单要够大、够顺手。
