bootstrap4 栅格 不同屏幕大小下文字大小变化

Bootstrap 4 的栅格系统（Grid System）主要是用于响应式网页设计，通过栅格布局可以帮助你在不同设备和屏幕尺寸上调整页面元素的排列和尺寸。对于文字大小的变化，Bootstrap 提供了媒体查询 (Media Queries) 和栅格系统的结合来控制。

你可以使用 `vw` 或 `rem` 单位，配合 Bootstrap 的 Breakpoints（断点），来设置不同屏幕尺寸下的字体大小。例如，在小屏幕（如手机）上可能会设置较小的文字，而在大屏幕（如桌面）上则可以设置更大的字体。这里有一个基本的例子：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
  /* 这里设置了在768px及以上屏幕的字体大小 */
  @media (min-width: 768px) {
    .text-for-large-screens {
      font-size: 1.2rem; /* 可以自定义大小 */
    }
  }

  /* 对于较小的屏幕（比如平板），可以有不同的设置 */
  @media (max-width: 767px) {
    .text-for-smaller-screens {
      font-size: 0.9rem;
    }
  }
</style>

<div class="container">
  <p class="text-for-large-screens">在大屏幕上显示的文字</p>
  <p class="text-for-smaller-screens">在小屏幕上显示的文字</p>
</div>