如何使用Bootstrap实现大屏幕场景下字体自动增大？

我用Bootstrap展示项目符号，笔记本电脑上字体大小合适，但在大电视屏幕或浏览器响应式工具里，使用Display 1类的字体并未如官方说明的那样自动增大。想问是否仅通过Bootstrap即可实现该功能，还是需要自定义CSS来针对不同屏幕断点自动调整字体大小？

我的代码如下：

<body>
<div class="container-fluid vh-100">
    <div class="row">
        <div class="col justify-content-start mx-3">
            {% for point in bullet_points %}
                <div class="row mb-3">
                    <h1 class="display-1 fw-bold">
                        {{ point }}
                    </h1>
                </div>
                    {% endfor %} 
        </div>        
        <div class="col w-50 vh-100">
            <div class="d-flex justify-content-end vh-100">
                <img src="{% static 'images/background.png' %}" clas="img-fluid">
            </div>
        </div>
    </div>
</div>
<script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>

解答 #

Bootstrap默认的Display类（比如display-1）只在预设断点范围内调整字体大小，它的最大字体尺寸是针对xxl断点（≥1400px）设计的，超过这个宽度后不会继续自动放大。如果你的屏幕宽度远超1400px（比如大电视），就会出现字体不再增大的情况。

要实现超大屏幕下字体继续响应式放大，有两种可行方案：

方案1：添加自定义CSS（无需修改Bootstrap源码） #

利用CSS的clamp()函数结合媒体查询，让字体在超大屏幕上根据视窗宽度自动缩放：

/* 针对xxl断点以上的屏幕，调整display-1的字体大小 */
@media (min-width: 1400px) {
  .display-1 {
    font-size: clamp(5rem, 8vw, 10rem);
  }
}

clamp()的三个参数分别是最小字体尺寸、基于视窗宽度的动态值、最大字体尺寸，可根据需求调整数值。

方案2：重写Bootstrap的Sass变量（适用于使用源码构建的场景） #

如果你是用Bootstrap的Sass源码自定义构建项目，可以直接修改Display类的尺寸变量，让它天生支持全屏幕响应：

$display1-size: clamp(3.5rem, 6vw, 10rem);

编译后生成的display-1类会自动在所有屏幕尺寸下适配，包括超大屏幕。

另外注意：你的代码里图片标签的clas是笔误，应该改为class，否则img-fluid类无法生效，可能影响右侧布局。

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