手机竖屏
单列排布、字号放大、按钮撑满，减少左右滑动与误触。
- 正文行宽控制在 36 字内
- 主要按钮高度不低于 44px
多端适配优化
多端适配优化：让每一种屏幕都打开顺畅
适配流程
五步走完一轮多端适配
每一步都有明确的输入与交付记录，改版交接时不必再翻聊天记录确认细节。
01
访问环境盘点
查看手机、平板、笔记本与大屏的访问占比，列出必须覆盖的常见分辨率清单。
02
断点规则重排
按屏宽重新划分栅格、字号与间距，标题在窄屏自然收束，不再出现挤行断字。
03
图片与资源适配
输出多尺寸图片并压缩体积，首屏只加载必要资源，其余位置进入视口再取图。
04
交互体验调整
放大按钮触控区，理顺表单与键盘弹出逻辑，弹层在不同高度下都能完整显示。
05
多端回归验收
在真机与模拟环境逐项核对，问题登记后修复，交付测试记录与适配说明。
覆盖范围
常见的四类访问场景，逐项调好
先解决使用频率最高的屏幕，再补上容易被忽略的横屏与大屏，避免上线后临时返工。
平板与折叠屏
两列到三列之间平滑过渡，图片不拉伸，卡片间距保持一致。
- 展开与折叠状态分别核对
- 避免出现半屏空白
笔记本与桌面
内容宽度设定上限，大屏上不再出现一行文字跨满整屏的情况。
- 主内容区宽度 1200–1280px
- 侧栏在窄屏自动收起
横屏与大屏展示
应对展会屏、会议投屏与横屏浏览，首屏信息在宽扁比例下依然完整。
- 横屏首屏高度自适应
- 大字号下保持层级清晰
适配重点
先把阅读顺序理顺，再谈画面细节
很多页面在手机上看不顺，并不是配色问题，而是信息顺序与尺寸没有跟着屏幕变化。我们按屏宽逐层检查，把该并排的并排、该收起的收起，让一屏之内只留下访客当下要看的内容。
- 首屏标题、副标题与主按钮在小屏上保持清晰先后，不互相遮挡。
- 列表与表格在窄屏改为纵向呈现，横向滚动仅保留在必要位置。
- 图片按容器比例裁切，加载前预留高度，滚动时页面不再跳动。
4 档
常用断点宽度
≥44px
按钮触控高度
3 轮
真机回归检查
上线前自检
发布前逐条过一遍，少留一个隐患
下面这些项目在多端适配优化里最常被漏掉，我们把它们整理成一份可勾选的清单，改版时可直接对照执行。
-
窄屏标题不折行错位 长标题在 360px 宽度下最多两行，超出部分按规则截断。
-
图片比例保持一致 列表图与主图统一按容器比例裁切，不出现压扁或留白。
-
导航在手机上可单手操作 抽屉菜单从右侧滑入，关闭按钮固定在易触位置。
-
表单键盘不遮挡输入项 输入框获得焦点后自动滚动到可视区域，提交按钮始终可点。
-
首屏资源控制在合理体积 字体、图标与首图按需加载，非首屏内容延后取用。
-
横屏显示不出现断层 横屏下首屏高度重新计算，滚动提示与按钮位置保持完整。
-
深色与浅色系统下文字可读 检查系统外观切换后的对比度，正文不发灰、按钮不发白。
-
跳转链接与锚点位置准确 页面内锚点在吸附导航下留出偏移，标题不被遮挡。
把适配问题一次理清
把现有页面地址与常被反馈的问题发给我们，我们会先给出多端适配优化的问题清单与调整顺序，再确认投入范围。