Bootstrap 3 站点上的自动调整标题大小

【问题标题】：Auto-Resizing Heading on Bootstrap 3 siteBootstrap 3 站点上的自动调整标题大小
【发布时间】：2013-12-12 10:14:13
【问题描述】：

我如何在 getboostrap.com 主页上为 Bootstrap 3 创建可调整大小的 <h1> 元素：http://getbootstrap.com/getting-started/

我知道我可以使用 fittext.js 之类的工具，但他们似乎可以通过使用 CSS 媒体查询进行调整。

【问题讨论】：

【解决方案1】：

您可以将您的<h1>标签放入Jumbotron。默认 h1 字体大小为 36 像素。您可以使用媒体查询使其更大：

@media screen and (min-width: 768px) {
  h1.resizable {
    font-size: 63px;
  }
}

您可以将resizableclass 添加到任何 h1 标记中，如果屏幕宽度至少为 768 像素，它将使其更大。

【讨论】：

【解决方案2】：

来自他们的 CSS

@media (min-width: 768px) {
  .bs-masthead h1 {
    font-size: 100px;
  }
}

.bs-masthead h1 {
  font-size: 50px;
  line-height: 1;
  color: #fff;
}

【讨论】：