窄屏优先重排
小屏下卡片改为单列，导航收进抽屉，表单标签压在输入框上方，避免横向滚动和缩放阅读。
适配范围
一套内容，每一块屏幕都读得下去
访客可能在地铁上用手机翻页，也可能在会议室用大屏投屏。开云网页把同一份内容按屏幕宽度重新排布，让阅读节奏、操作手感和信息完整度都不掉档。
平板双栏过渡
768 至 991 像素之间保留两列栅格，图文比例同步收敛，横竖屏切换时不出现错位空档。
桌面宽屏利用
大屏按 1200 像素内容区排布，图片按 16:10 裁切，行宽控制在易读区间，长行不再让人串行。
数据表改分组
对比表在窄屏转为分组卡片，保留关键列并收起次要列，规格与价格信息依旧能一眼对上。
端侧覆盖情况
规则定义完成后，开云网页会在真实设备上核对主要阅读路径，把端侧偏差压到可以忽略的范围。
- 手机端 375 至 430 像素宽度优先校验
- 平板横竖屏各走一遍导航与表单流程
- 桌面端覆盖 1280、1440、1920 三档常见分辨率
手机端（375–430px）
96%
平板端（768–1024px）
92%
桌面端（1280–1920px）
98%
横竖屏切换稳定性
94%
交付过程
六步走完，适配标准留在站点里
从端侧清单到上线回归，每一步都有可核对的产出，改完之后规则是写下来的，而不是靠记忆维持。
-
01
梳理端侧清单
确认访客主要使用的设备类型与浏览器版本，列出手机、平板、笔记本、大屏显示器的覆盖范围，作为后续验收依据。
-
02
定义断点与栅格
按 1200、992、768、560 四档断点确定栏宽、间距与字号变化规则，一次定稿，后续所有页面共用同一套数值。
-
03
改造公共组件
导航、卡片、按钮、表单、表格按端侧重排，触控目标不小于 44 像素，主按钮与次按钮在窄屏下改为通栏排列。
-
04
图片与字体适配
封面统一 16:10 裁切，按屏幕密度准备多倍图；正文行高随宽度收敛，长标题不断词、不遮挡相邻元素。
-
05
真机逐页走查
在 iOS、Android、Windows 与 macOS 主流机型上逐页核对导航、表单、列表与图片表现，记录偏差并当场修正。
-
06
上线后回归验证
每次内容更新后复跑端侧清单，确认新增栏目没有破坏既有排版，偏差出现时按规则表回溯定位。
运行数据
长期维护里攒下来的几组数字
适配不是一次性动作。项目上线后，开云网页会持续观察端侧表现，把常见问题沉淀成检查项。
4档断点
1200 / 992 / 768 / 560 统一规则
44像素
触控目标最小尺寸
16:10
封面图统一裁切比例
2小时
工作日内问题响应时间
iOS 主流机型
Android 多分辨率
平板横屏
平板竖屏
1280 桌面
1440 桌面
1920 桌面
窄屏表单
长表格分组
多倍图加载
横竖屏切换
无横向滚动
价格与包含项
按现有站点状态选择适配深度
栏目结构基本稳定、只想把现有页面在小屏上排好的站点，选基础适配；希望从设计阶段就按多端规则搭建的站点，选深度适配。
基础适配
按页面计
适合已有站点、栏目不再大改，需要快速把移动端阅读体验补齐的项目。
- 四档断点规则定义
- 公共导航与页脚适配
- 卡片、列表、表单重排
- 封面图裁切规范
- 一轮真机走查与修正
深度适配
按项目计
适合正在改版或新站搭建的项目，从组件层开始按多端规则设计，减少后期返工。
- 基础适配全部内容
- 组件库端侧状态定义
- 数据表分组方案设计
- 多倍图与字体阶梯输出
- 两轮真机走查与修正
- 端侧检查清单交付
- 上线后一次回归验证
包含项基础适配深度适配
断点与栅格规则表包含包含
公共组件适配改造包含包含
组件库端侧状态定义不含包含
数据表窄屏分组方案不含包含
真机走查轮次一轮两轮
端侧检查清单交付不含包含
上线后回归验证不含一次
常见问题
做适配之前，客户常问的几件事
响应式通常只保证页面不溢出，多端适配还要处理字号节奏、触控目标、图片裁切比例与表单输入体验。开云网页在四档断点上分别定义间距与字号，并在真机上验证操作路径是否顺畅。
可以。先抽取现有页面的公共头部、卡片与表单组件，统一定义断点规则后再逐页替换样式，栏目结构与内容不需要重做，改造期间线上访问不受影响。
以二十个页面以内的企业站为例，规则定义约两到三个工作日，组件与页面改造约五到八个工作日，真机走查与修正在其后两日内完成，具体以页面复杂度与组件数量为准。
数据表在窄屏转为分组卡片，保留关键列并隐藏次要列；长文本按段落切分并提升行高，避免出现横向滚动条和需要双指缩放的阅读体验。
新增内容只要沿用既有卡片与栅格类名即可保持一致。开云网页会提供一份端侧检查清单，编辑人员按清单自检，出现偏差时再回看断点规则即可定位问题。