bootstrap 4标题类字体在小屏下不生效，因其默认为固定值且无响应式断点，需用@media (max-width: 575.98px)精准覆盖，并确保css在bootstrap.min.css后加载。
为什么直接写 font-size: 1.1rem 在小屏下不生效
Bootstrap 4 的文字大小（如 .h1 到 .h6、.lead）默认是固定值，没有内置响应式断点变体；你写的全局规则会被其内部媒体查询覆盖——比如 .h2 在 @media (min-width: 576px) 下设为 font-size: 2.5rem，而你的无断点样式在小屏（xs）下权重更低，根本不会触发。
用 @media (max-width: 575.98px) 精准作用于 xs 断点
这是最可靠、无需编译、兼容 CDN 环境的方式。关键不是“加个媒体查询”，而是匹配 Bootstrap 4 官方断点值（575.98px，非 576px 或 768px），并确保你的 CSS 文件在 bootstrap.min.css 之后加载。
-
@media (max-width: 575.98px)是唯一能真正锁定 xs 的写法；写成576px会漏掉宽度恰好为576px的设备 - 对标题类单独覆盖：
.h3 { font-size: 1.5rem; line-height: 1.3; }放进该媒体查询里，比改html或body更安全 - 避免只调
font-size：小屏下line-height过大会撑高容器，建议同步设为1.2–1.4无单位值 - 如果用了
.display-*类，它们的font-size含vw单位（如calc(1.5rem + 2.5vw)），在 xs 下可能过大，需显式重置为固定rem
别用 text-sm-center 之类类名幻想响应式字体
Bootstrap 4 根本没有 fs-sm-4 或 font-size-sm 这类工具类——所有 fs- 前缀是 Bootstrap 5+ 才引入的。你在 v4 项目里写 class="fs-4 fs-sm-3"，后半段完全被忽略，浏览器当无效类处理。
-
text-*类（如text-center、text-lg-right）只控制对齐，和字体大小无关 -
.lead在小屏下仍保持font-size: 1.25rem，若想压缩，必须手动覆盖 - 不要给元素加
style="font-size: 1.1rem"：内联样式虽优先级高，但无法响应视口变化，且难维护 - 若项目已用 Sass，可复用
$font-size-base变量写@include media-breakpoint-only(xs) { .my-text { font-size: $font-size-base * 0.9; } }，但纯 CSS 环境下仍得靠手写媒体查询
小屏文字排版容易被忽略的细节
真正影响可读性的往往不是字号本身，而是它和行高、字间距、容器 padding 的组合效果。尤其在 iPhone SE 或 Android 小屏上，1px 的偏差都可能导致文字贴边或换行错乱。
-
letter-spacing在小屏下建议设为0.01em或0，负值会加剧拥挤感 - 嵌套在
.container里的文字，要留意.container自身的padding-left/right: 15px，窄屏下左右留白占比过高，可考虑对小屏加.container { padding-left: 8px; padding-right: 8px; } - 如果文字在
.jumbotron或.alert内，这些组件自带padding，光调字体不够，需同步检查上下文留白是否挤压内容 - Chrome DevTools 的 “Rendering” 面板打开 “Emulate CSS media features” → “prefers-reduced-motion” 或 “forced colors”，能提前暴露某些小屏下因动画/对比度导致的文字渲染异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
