Bootstrap 4响应式排版失效：自定义字体大小无法自适应怎么办？

你遇到的核心问题是把Sass专属的混合宏直接写到了普通CSS文件里，浏览器无法解析@include这种Sass语法，所以你的响应式字体大小设置完全没生效。下面分两种场景给你针对性的解决办法：

场景1：你用的是纯CSS（无预处理器） #

如果项目没用到Sass，不能直接用Bootstrap的media-breakpoint-up()混合宏，得换成Bootstrap官方定义的实际断点阈值，写标准的媒体查询代码：

/* 移动端默认字体大小 */
html { font-size: 1rem; }

/* 小屏幕及以上（≥576px） */
@media (min-width: 576px) {
  html { font-size: 1.2rem; }
}

/* 中等屏幕及以上（≥768px） */
@media (min-width: 768px) {
  html { font-size: 1.4rem; }
}

/* 大屏幕及以上（≥992px） */
@media (min-width: 992px) {
  html { font-size: 1.6rem; }
}

把这段代码替换你原来的代码，放到基础CSS文件中就能正常生效。

场景2：你用的是Sass（预处理器） #

如果项目基于Bootstrap的Sass源码构建，需要确保两个前提：

1. 已正确导入Bootstrap的核心Sass文件，尤其是包含断点变量和混合宏的部分：

   // 先导入Bootstrap的变量与混合宏
   @import "bootstrap/scss/variables";
   @import "bootstrap/scss/mixins/breakpoints";
   
   // 再写你的自定义样式
   html { font-size: 1rem; } 
   @include media-breakpoint-up(sm) { html { font-size: 1.2rem; } } 
   @include media-breakpoint-up(md) { html { font-size: 1.4rem; } } 
   @include media-breakpoint-up(lg) { html { font-size: 1.6rem; } }
   

2. 确保你的构建工具（比如Webpack、Gulp）已经配置好Sass编译，能把.scss文件转成浏览器可识别的.css文件。

额外小提示 #

• 强制刷新浏览器缓存（Ctrl+F5），有时候旧的CSS文件会被缓存，导致新代码不生效。
• 修改html的font-size会影响所有用rem单位的元素，Bootstrap很多组件是基于默认1rem=16px设计的，调整时要注意避免破坏原有布局。

内容的提问来源于stack exchange，提问作者sean