响应式团队页核心是适配各屏：手机用col-12、平板用col-sm-6、中屏用col-md-4、大屏用col-lg-3；头像须用img-fluid+object-fit:cover；文字截断需text-truncate+w-100；悬停动画只过渡transform/opacity；自定义字体要preload。
用 Bootstrap 5 的 container-fluid + row + col 布局团队卡片
响应式团队页的核心不是“怎么好看”，而是“在手机上不溢出、在平板上不堆叠过密、在桌面端有呼吸感”。Bootstrap 5 的栅格系统默认支持，但很多人直接套 col-4 导致小屏错乱——因为没考虑断点适配。
正确做法是按设备分层定义列宽：
-
col-12：所有屏幕下占满一行（手机竖屏） -
col-sm-6：≥576px（小平板）起每行两个 -
col-md-4：≥768px（中屏）起每行三个 -
col-lg-3：≥992px（大屏）起每行四个（需确认内容密度是否撑得开）
别硬塞 col-3，它在手机上会强制四列挤成一排，文字缩成针尖大小。
团队头像用 img-fluid 而不是 img-responsive
img-responsive 是 Bootstrap 3 的类，Bootstrap 4/5 已废弃。用错会导致图片不缩放、溢出容器，尤其在 iOS Safari 上常见横向滚动条。
必须用 img-fluid，它会给图片加 max-width: 100% 和 height: auto。如果头像比例不统一，再补一个 object-fit: cover 防变形：
<img src="avatar.jpg" class="img-fluid rounded-circle" style="object-fit: cover; width: 180px; height: 180px;">
注意：rounded-circle 在小屏下会让头像过小（比如 col-sm-6 下宽度只剩 ~150px），建议搭配 mx-auto d-block 居中，并用 min-width 保底。
成员信息文字在小屏上被截断？检查 text-truncate 和父容器宽度
用 text-truncate 实现单行省略很常见，但它依赖父容器有明确宽度 + overflow: hidden。而 Bootstrap 的 col 在 flex 布局下有时不触发这个行为，尤其嵌套了 card-body 后。
解决方法很简单：
- 给包裹文字的元素加
text-truncate同时加w-100（强制设宽 100%） - 避免在
card-title或card-text外再套多余div，否则可能打断 flex flow - 如果用
h5标题，记得加mb-1控制间距，否则小屏下标题和职位贴太近
错误示例：<h5 class="card-title text-truncate">张三</h5> —— 缺少 w-100，在 col-sm-6 下大概率失效。
悬停动画卡顿？禁用 transition 的非合成属性
给团队卡片加 hover 上浮效果（如 transform: translateY(-5px)）很常见，但有人顺手加 transition: all .3s，结果在低端安卓机上掉帧。
原因：all 会监听所有属性变化，包括 color、padding 这类触发布局重排（layout）的属性。真正该动的只有 transform 和 opacity（它们走 GPU 合成）：
.card:hover { transform: translateY(-5px); transition: transform .3s ease, opacity .3s ease; }
另外，iOS Safari 对 transform 的 z-index 行为敏感，如果卡片悬停后被其他元素遮挡，加一句 will-change: transform; 能提前提示渲染引擎优化。
最常被忽略的是字体加载时机：团队名用自定义字体（如 Google Fonts）时，首屏可能闪动或回退成系统字体。别只靠 font-display: swap，要在 <link> 加 rel="preload" 提前抓取。
