Bootstrap Адаптивный Размер текста [дубликата]

134

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

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

  • 0
    Вы пробовали использовать проценты для размера шрифта?
  • 12
    Это не дубликат указанного ответа. Этот вопрос специфичен для Bootstrap, как и ответ ниже. Есть тонкое, но важное отличие. Bootstrap определяет переменные в LESS для использования в ваших медиа-запросах. Я призываю @kapa убрать неточное дублирующее обозначение.
Показать ещё 3 комментария
Теги:
responsive-design

2 ответа

118
Лучший ответ

Самый простой способ - использовать размеры в% или 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

Поделиться
  • 1
    Я пытался это сделать, но Adobe Dreamweaver зависает, когда я вхожу в @screen-sm
  • 0
    не уверен почему. Dreamweaver меньше поддерживает
Показать ещё 4 комментария
43

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

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;
}
Поделиться
  • 1
    Лучше использовать медиазапросы, пока единицы просмотра не поддерживаются на большинстве мобильных устройств, см., Например, quirksmode.org/mobile/tableViewport.html.
  • 4
    Это уже хорошо поддерживается caniuse.com/#feat=viewport-units
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню