Auto-Resizing заглавие на Bootstrap 3 сайте

Question

Как создать изменяемые <h1> элемента на getboostrap.com домашней странице для Bootstrap 3: http://getbootstrap.com/getting-started/

Я знаю, что можешь использовать такие инструменты, как fittext.js но их регулируют с помощью CSS СМИ Кажется, запросы.

Answer 1

Вы можете поместить свой <h1> тег в Jumbotron. Размер шрифта по умолчанию h1 - 36 пикселей. Вы можете использовать медиа-запросы, чтобы сделать его больше:

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

Вы можете добавить resizable класс любого тега h1, и это сделает его больше, если ширина экрана при минимальной 768px.

Answer 2

С их помощью CSS

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

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