如何在引导程序 4 中创建响应式文本？ [关闭]答案

【问题标题】：How to create responsive text in bootstrap 4? [closed]如何在引导程序 4 中创建响应式文本？ [关闭]
【发布时间】：2018-02-02 20:23:21
【问题描述】：

谁能帮助我使用 Bootstrap 4 响应文本。我到处搜索，但奇怪的是没有看到这方面的教程。如果您想指导我，这是我的代码。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div style="font-size: 3rem;">Hello World</div>
    </div>
  </div>
</div>

【问题讨论】：

太棒了！现在你的问题是什么？
发生了什么？你期望会发生什么？给我们一个minimal reproducible example
请更改您的标题以描述问题或疑问。另外，请参阅Why is “Can someone help me?” not an actual question?
如果这就是您的代码的全部，那么您已经忘记了包含 Bootstrap，并且您忘记了最重要的视口元标记。
@csmckelvey，您的专业人士更了解。我只是表达了我对重新标题的看法，结果我得到了 -27 的暂停数天来“问”另一个问题。可能是专业人士欢迎新手的一种方式。

标签： html css twitter-bootstrap-4

【解决方案1】：

好吧，这在 Bootstrap 4 文档的Responsive typography 部分中有描述。来自文档：Bootstrap 不会为您执行此操作，但如果您需要，添加它相当容易。

确实没那么难。基本上你必须在<html>标签上为每个媒体断点定义字体大小。

这是一个例子：

html { font-size: 1rem; }

@media (min-width: 576px) {
    html { font-size: 1.25rem; }
}
@media (min-width: 768px) {
    html { font-size: 1.5rem; }
}
@media (min-width: 992px) {
    html { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
    html { font-size: 2rem; }
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Hello World</h1>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

【讨论】：

啊，你创造了我的生活——你以最简单的方式引导。来自新手的感谢。
对我来说，使用font-size: 9vw; letter-spacing: 4vw; 来满足我的需要似乎更容易