Как я могу получить заголовки страниц для изменения размера с помощью адаптивного макета?

Итак, у меня есть сайт, который должен функционировать как на мобильных устройствах, так и на компьютерах. Я использую бутстрап-отзывчивость и получил много работы. В настоящее время я работаю над блоком героев для первой страницы. У меня есть заголовок страницы, который я хотел бы автомасштабировать в соответствии с размером экрана. Основной сайт начальной загрузки (http://twitter.github.com/bootstrap/) использует что-то вроде того, что я хочу делать с заголовком главной страницы. Любая помощь приветствуется.

Соответствующий код:

<div class="container">
        <div class="hero-unit">
            <div class="page-header">
                <h1>Page Header</h1>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu dolor, dictum scelerisque gravida nec, vulputate in odio. Pellentesque sagittis ipsum et mauris elementum vitae molestie ipsum blandit. Mauris tempus hendrerit arcu, sed vestibulum justo tempor a. Praesent sit amet odio ligula. Morbi sit amet leo vestibulum neque bibendum ullamcorper sed ut ante. Vestibulum id diam quis ipsum aliquet vestibulum. Donec vulputate auctor pharetra.</p>
            <a href="#" class="btn btn-large btn-primary">Learn More</a>
        </div>
    </div>

EDIT: Вот еще один пример. http://www.screenlight.tv/ Если вы измените размер своего окна на этой странице, размер заголовка изменится соответствующим образом. Я попытался взглянуть на источник, и мне трудно найти его.

Ответ 1

Хорошо, я понял это. Для дальнейшего использования это делается с использованием свойства @media(max-width: ). Так, например, вы бы сделали:

@media(max-width: 480px) {
  h1 {
    font-size: 12pt;
  }
}

Или что вам нужно делать. Надеюсь, это поможет кому-то в будущем! Ура!

Ответ 2

Если это фотография заголовка изображения (без использования текста), также работает функция "class=" img-responsive ". То есть:

<div class="container-fluid">
 <div class="row">
 <img src="/images/sample_photo.jpg" class="img-responsive">
 </div>
</div>

Живой пример здесь: http://www.bootply.com/Cc0rdXsJXP

Ответ 3

Вы пытались переключить его на

  <div class="container-fluid">

Ответ 4

Как отмечено здесь, bootstrap в настоящее время не поддерживает отзывчивый размер шрифта из коробки. Уже показанный @media(max-width: ) способ пойти.