SPEC 01
输入框规格
- 内容区高度52 / 50 / 48px
- 圆角12px
- 默认描边1px rgba(255,255,255,.08)
- 聚焦描边#2FE39B + 外发光
- 左右内边距16px
关键数值
五个几乎不用改的基准值
多端适配里真正需要反复确认的数值并不多。下面五项覆盖了绝大多数布局切换场景，改动任何一项前，先看它们在其它设备上的连带影响。
1024px
桌面分栏起点
左右 6:6 恢复
768px
平板单列切换
上下堆叠排列
520px
按钮通栏阈值
两侧留白收窄
44px
最小点击区域
宽高同时满足
12px
统一圆角值
输入框与按钮一致
对照表
多端显示参数对照
下表按设备类型列出开云网页登录界面的常用显示参数。宽屏与窄屏之间的差异主要集中在栅格列数、按钮排列方式和正文字号上，输入框高度变化幅度较小。
| 设备类型 | 典型宽度 | 栅格 | 输入框 | 按钮 | 正文字号 | 布局形态 |
|---|---|---|---|---|---|---|
| 桌面显示器 | ≥1440px | 12 列 6:6 | 52px 高 | 48px 高 | 17px | 左右分栏，参数面板常驻显示 |
| 笔记本 | 1024–1439px | 12 列 7:5 | 52px 高 | 48px 高 | 16px | 分栏保留，栅格间距收窄至 24px |
| 平板竖屏 | 768–1023px | 12 列单栏 | 50px 高 | 48px 高 | 16px | 上下堆叠，按钮转为通栏宽度 |
| 平板横屏 | 960–1023px | 12 列 6:6 | 50px 高 | 48px 高 | 16px | 分栏恢复，板块纵向留白收至 56px |
| 手机 | 414–767px | 单列 | 48px 高 | 46px 高 | 15px | 单列排列，正文不低于 15px |
| 小屏手机 | ≤413px | 单列 | 48px 高 | 44px 高 | 15px | 通栏按钮，表格改为横向滚动 |
表格中的高度值为内容区高度，不含外描边。带颜色标注的数值表示已接近建议下限，继续压缩会影响点按命中。
左右滑动查看完整列
规格卡
登录界面元素规格
六张规格卡分别对应输入框、按钮、文字层级、间距体系、状态提示和背景处理。它们共同构成开云网页登录界面的显示基准，核对时按卡片顺序逐项比对即可。
SPEC 02
按钮规格
- 主按钮底色#2FE39B
- 主按钮文字#04150E
- 次按钮描边1px rgba(255,255,255,.18)
- 最小点击区域44 × 44px
- 按下位移1px
SPEC 03
文字层级
- 主标题clamp(36px,5.2vw,68px)
- 区块标题clamp(26px,3.2vw,42px)
- 卡片标题19–24px
- 正文16–17px / 行高 1.85
- 辅助小字13px / 字距 .06em
SPEC 04
间距体系
- 板块纵向留白96px / 56px
- 卡片内边距24–28px
- 栅格间距24px / 32px
- 段落间距20px
- 标题与正文间距16px
SPEC 05
状态提示
- 通过 / 在线#2FE39B
- 提示 / 更新#FFC46B
- 错误提示#FF6B6B（限两处）
- 徽章圆角999px
- 描边统一1px
SPEC 06
背景与图片
- 背景叠加遮罩暗化 86%–92%
- 网格线间距64px
- 图文区比例16 : 10
- 文字对比度不低于 4.5 : 1
- 图片圆角16px
元素规范
界面元素在不同宽度下的处理
把常用元素拆开来看，每一项在宽屏与窄屏之间都有明确的对应关系。出现显示差异时，按下面的顺序逐条排查，通常能定位到具体原因。
-
01
输入框保持等高
账号与验证码输入框在同一屏内高度一致，避免因字重或图标差异导致视觉参差。窄屏时高度只下调 2–4px。
-
02
按钮转为通栏
宽度低于 520px 后，操作按钮由行内排列改为通栏。高度不低于 44px，保证单手持机时也能准确点按。
-
03
聚焦态与错误态区分
输入框获得焦点时描边转为青绿并带一层外发光；出现错误时改用红色描边，两种状态同时出现时以错误态优先。
-
04
宽表格允许横向滚动
参数类内容在窄屏下保持原有列结构，外层容器提供横向滚动，避免压缩列宽后出现文字折行错位。
-
05
背景图叠加暗化层
图片区域统一叠加暗化遮罩，保证覆盖其上的标题与说明文字在明暗交界处依旧可读。
自检
多端上线前的四项核对
样式调整完成后，用下面四项快速过一遍。它们覆盖了最常见的错位、遮挡与可读性问题，通常几分钟就能确认完。
确认没有横向滚动
在 375px、768px 和 1280px 三个宽度下分别打开页面，观察整页是否可以左右拖动。
确认按钮不被裁切
按钮四周保留足够留白，圆角与描边完整显示，长文案在窄屏下自动换行而不是被截断。
确认文字层级清晰
主标题、区块标题与正文之间的字号差距明显，缩小到 80% 缩放时依然能分辨层级。
确认点按目标够大
所有可点击元素的实际区域不低于 44 × 44px，相邻链接之间留有间隔，避免误触。
屏幕宽度低于 520px 时，开云网页登录界面把按钮改为通栏排列，避免两侧留白过窄导致点击区域偏小。通栏按钮的高度保持在 44px 以上，手指点按更容易命中。
先恢复 100% 缩放确认显示是否正常，再把浏览器窗口宽度调到 1024px 附近观察分栏切换。若恢复正常，说明是缩放影响了断点判定，可按对照表重新核对当前设备对应的布局形态。
对照表设置了横向滚动容器，窄屏下可以在表格区域左右滑动查看完整列。表格外框与圆角保持固定，滑动只影响内部内容，不会带动整页横向位移。
正文建议保持在 15px 到 17px 之间，行高不低于 1.6。字号继续调小会影响提示文字的辨识度，也会让点击区域低于 44px 的建议值，使用体验反而变差。
主文字与背景的对比度按较严格的标准处理，强光下主要依靠字重层级与描边区分信息。如果背景图处于高亮区域，会叠加暗化遮罩，保证文字保持可读。
样式更新后，浏览器可能仍保留旧缓存。可以强制刷新页面，或在无痕窗口中重新打开核对。移动端浏览器缓存更顽固时，清理一次站点数据即可看到新的显示效果。