масштабирование текста при изменении размера с помощью начальной загрузки

Question

Как перемасштабировать текст с помощью бутстрапа? (на самом деле h2) Проблема в том, что заголовок выходит из окна. Вот CSS код коробки:

.buton{ 
    padding-top:50px; 
    padding-bottom:50px; 
    border:2px solid #E3A739; 
    border-radius:10px; 
    margin-top:3em; 
    margin-bottom:3em; 
} 

А вот HTML код:

<div class="row"> 
        <div id="iteme" class="buton col-xs-3 col-md-3 col-lg-3"> 
         <h2>Iteme</h2> 
        </div> 
        ..... 

Как я могу сделать заголовок изменить размер при изменении размера самой страницы? (Я хочу, чтобы сделать сайт реагирующий)

Answer 1

Вы можете использовать фольксваген вместо пикселей:

.buton h2{ 
    font-size:3vw; 
} 

Вы должны изменить переменную, как вы хотите быть, и вы можете использовать медиа-запросы с ним тоже, потому что в небольших устройствах, это могло бы стать невидимый с фактическим значением (3vw), поэтому вы можете изменить его для небольших устройств, чтобы быть более значительным.

Вы можете проверить поддержку браузера для видовых единиц здесь: CanIUseIt

Я надеюсь, что это поможет.

Answer 2

Что я видел в много веб-сайта является то, что они используют:

font-size: 100%; 

их элементов текста это делает его масштаб в пределах его родителя. Иногда он может работать, иногда он может стать настолько маленьким, что он едва читается на телефоне. Другой вариант - использование медиа-запросов.

Answer 3

Что вы можете сделать, это посмотреть медиа-запросы и узнать ширину или высоту, на которые нужно отредактировать страницу.

Посмотрите сюда за помощью с ним: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Answer 4

h2{ 
    font-size:2rem; 
} 

rems are awesome!

Answer 5

Вы можете использовать vh, vw, vmin and vmax единиц, чтобы изменить размер текста в зависимости от размера окна просмотра.

Например

h2 { 
    font-size:4vh; 
} 

будет размером текст Н2 до 4% от высоты окна просмотра.

Я Погружает example JSFiddle here

Answer 6

Bootstrap использует медиа-запросы, как так.

@media (min-width: 768px) { 
    h2 { 
     font-size: 14px; 
    } 
} 
@media (min-width: 992px) { 
    h2 { 
     font-size: 16px; 
    } 
} 
@media (min-width: 1200px) { 
    h2 { 
     font-size: 18px; 
    } 
}