Carousel文字字号响应式控制需用CSS媒体查询而非Bootstrap内置类，因.carousel-caption无预设响应式font-size；应按sm、md、lg断点阶梯设置h2等元素字号，并避免clamp()导致溢出或闪动。
Carousel 文字内容的字号响应式控制靠 CSS 媒体查询，不是 Bootstrap 内置类
bootstrap 的 .carousel-caption 默认只给文字加了基础样式（如 color、text-shadow），字号是继承自父级或浏览器默认值，没有预设响应式 font-size。想让标题/描述在手机上小、平板中等、桌面大，必须自己写媒体查询。
常见错误是直接给 .carousel-caption p 或 .carousel-caption h5 设固定 font-size，结果小屏文字撑出容器、大屏又太小——本质是没断点控制。
- 推荐把文字包裹在
或里，避免直接对.carousel-caption设字号（它含多个子元素，易冲突） - 用
rem或em单位，配合根字体缩放更可控；vw虽灵活但难精确，慎用于正文描述 - Bootstrap 5 的断点：
sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）——媒体查询按这些值写才和栅格对齐
怎么写才能让 h2 标题在 sm 屏是 1.25rem、md 屏 1.5rem、lg 屏 2rem
直接在 CSS 中覆盖默认样式，不需要 JS 或修改 HTML 结构。关键点是媒体查询顺序必须从小到大，否则会被覆盖：
@media (max-width: 575.98px) {
.carousel-caption h2 {
font-size: 1.25rem;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.carousel-caption h2 {
font-size: 1.5rem;
}
}
@media (min-width: 768px) {
.carousel-caption h2 {
font-size: 2rem;
}
}
注意：max-width: 575.98px 是 Bootstrap 的 sm 断点临界值（576px 是起点），这样能精准匹配；如果用 575px 可能在某些设备出现 1px 错位。
- 不要用
!important强行覆盖——优先级靠选择器 specificity 解决，比如加个.my-carousel .carousel-caption h2比单纯.carousel-caption h2更高 - 如果用了 Bootstrap 的 Sass，可在变量文件里改
$font-size-base，但会影响全局，不推荐只为轮播图调整
为什么用 font-size: clamp() 不适合 Carousel 文字
clamp(1.125rem, 4vw, 2rem) 看似自动适配，但在 Carousel 场景下容易失控：轮播图高度常设为固定值（如 height: 50vh），文字随视口宽度缩放时，可能在中等屏突然变大导致溢出容器，或在窄屏过小看不清。
-
clamp()依赖宽度变化，而 Carousel 文字通常需要“按设备尺寸阶梯式调整”，不是连续缩放 - 移动端 Safari 对
clamp()渲染有延迟，首次滑动时文字可能闪动 - 若轮播图用了
object-fit: cover的图片，文字区域高度固定，clamp()的上下限反而难对齐垂直居中
移动端文字被截断或看不见？检查这三项
文字消失或只显示半行，大概率不是字号问题，而是布局挤压：
-
.carousel-caption默认有bottom: 20%，在小屏上可能被轮播图底部控件（指示点、箭头）遮挡——改用bottom: 1rem或padding-bottom: 1.5rem更可靠 - 父容器
.carousel若设了overflow: hidden（Bootstrap 默认有），而文字用了transform: translateY()或负margin，会直接裁掉——优先用padding和top/bottom定位 - 部分安卓 WebView 对
text-rendering: optimizeLegibility（Bootstrap 默认启用）敏感，导致小字号文字渲染模糊甚至透明——可加text-rendering: auto覆盖
真正麻烦的是多行描述文本在不同断点下的行高与行数控制，那得结合 display: -webkit-box 和 line-clamp，但 Carousel 里建议单行标题 + 短描述，复杂排版会拖慢滑动性能。
