Загрузочный ответный размер текста

Я пытаюсь создать отзывчивый макет, используя bootstrap, и в настоящее время я определяю некоторые из названий с размером шрифта: 3em;

Но когда макет сжимается, это слишком велико. Как я могу оперативно уменьшить размер текста?

ОТВЕТЫ

Ответ 1

Самый простой способ - использовать размеры в% или em. Просто измените размер базового шрифта, все изменится.

Меньше

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4em;
}

Посмотрите на все способы fooobar.com/questions/22555/...

Вы можете использовать единицы просмотра (vh, vw...), но они не работают на Android < 4.4

Ответ 2

Ну, мое решение вроде хака, но оно работает, и я его использую.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}