在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，它將使其更大。