Я пытаюсь создать отзывчивый макет, используя bootstrap, и в настоящее время я определяю некоторые из названий с размером шрифта: 3em;
Но когда макет сжимается, это слишком велико. Как я могу оперативно уменьшить размер текста?
Самый простой способ - использовать размеры в% или em. Просто измените размер базового шрифта, все изменится.
Меньше
@media (max-width: @screen-xs) {
body{font-size: 10px;}
}
@media (max-width: @screen-sm) {
body{font-size: 14px;}
}
h5{
font-size: 1.4em;
}
Посмотрите на все способы https://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters
Вы можете использовать единицы просмотра (vh, vw...), но они не работают на Android < 4.4
@screen-sm
Ну, мое решение вроде хака, но оно работает, и я его использую.
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;
}