在Bootstrap 3站点上自动调整标题

Question

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

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

Answer 1

来自他们的CSS

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

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

Answer 2

您可以将<h1>标记放在Jumbotron中。 默认的h1字体大小为36px。您可以使用媒体查询来扩大它：

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

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