在 B 端 SaaS 的前端开发中，响应式设计经常被简单理解为：桌面端并排排列的元素，在移动端利用 CSS Flexbox 或 Grid 自动折叠为单列垂直布局。
然而，当面对真实业务场景时，这种简单的折行逻辑往往不够用。例如，机构管理员可能需要在小尺寸屏幕的手机上，快速查看一份包含多人数据的心理测评报表。这份报表往往包含学生姓名、抑郁指数、焦虑指数、自杀风险预警等十几项核心指标。如果直接将 PC 端宽幅的 <table id="psy-report"> 结构在手机屏幕中渲染，页面通常会被撑破并出现横向滚动条，或者内容被压缩重叠，导致数据阅读体验大幅下降。
本文将探讨在移动端有限的视口宽度下，如何对包含大量维度的数据报表进行合理的排版调整。
固定列：改善横向滚动体验
在移动端保留横向滚动条虽然实现成本低，但在浏览多列数据时存在明显的可用性问题。当用户向右滑动查看“干预建议”列时，最左侧的“学生姓名”往往已经移出屏幕可视区。用户必须反复左右滑动，才能在脑海中将数据与对应人员对齐，这在核对重要信息时容易产生误差。
为了解决视线对齐的问题，可以采用固定列（Sticky Column）方案。通过 CSS3 的 position: sticky 属性，将包含身份标识（如姓名、学号）的首列固定在屏幕左边缘。
“`css
.table-cell-name {
position: sticky;
left: 0;
z-index: 2;
background-color: #ffffff; / 防止滚动时背景透明导致文字重影 /
box-shadow: 2px 0 5px rgba(0,0,0,0.1); / 增加视觉分割线 /
}
“`
应用该样式后，用户向右滑动查看其余各项指标数据时，姓名列将始终固定在左侧，有效维持了数据行文的对照关系。
从表格到卡片的布局转换
如果数据列数过多，单纯依赖固定列依然难以提供良好的手机端阅读体验。针对这种高密度报表的展示难题，橙星云技术团队在移动端通常会放弃传统的 Table 结构，转而采用 Card（卡片）式的瀑布流布局。
当浏览器视口宽度小于 768px 时，可以结合 CSS 媒体查询和前端框架（如 Vue）的条件渲染逻辑，将原有的 <table> DOM 结构转换为独立的个人信息卡片。原本分布在同一行的姓名、抑郁得分、预警等级，被重组到单个卡片容器内。
在卡片内部，顶部区域用于放置突出的标识信息（姓名及预警标签）。中间区域则将原先横向排列的指标数据，通过 Grid 布局折叠为多行两列或三列的网格形式。这种布局调整彻底消除了横向滑动的需求，用户只需单手垂直滑动，即可按人员逐个查看详细指标。
按权重控制信息展示密度
在部分业务场景中，客户仍然希望保留类似表格的紧凑感，以便在一屏内尽可能多地纵览数据。针对这种需求，可以引入列权重的概念来控制展示信息。
在十几项数据列中，不同字段的业务关注度往往存在差异。像“测评完成时间”或“常模基准”等辅助字段，在移动端的初步浏览阶段并非核心信息。我们可以在渲染逻辑中为各列配置权重标识。
当检测到处于小屏环境时，前端逻辑自动将权重较低的列隐藏（display: none），仅保留最关键的“姓名”、“综合预警级别”和“后续操作”等三至四列。如果管理员需要核实被折叠的具体数据，点击该行即可唤出下方的 Drawer（抽屉式面板）或 Modal 弹窗，其中完整展示该人员的所有指标明细。
在 B 端心理 SaaS 的研发中，数据展示并非简单的后台 JSON 渲染。面对移动设备屏幕尺寸的客观限制，通过局部冻结、卡片转换以及基于权重的按需展示，前端工程师可以在狭小的视口内构建出层次分明、易于交互的数据视图，从而提升管理员在移动办公场景下的数据处理效率。