@a_palanski

Как в bootstrap сделать чтобы текст уменьшался вместе с блоком на разных устройствах?

Добрый вечер, подскажите, как в bootstrap сделать чтобы текст уменьшался вместе с блоком на разных устройствах? А то на маленьких разрешениях блок получается адаптивный, а текст начинает выходить за рамки
  • Вопрос задан
  • 4577 просмотров
Решения вопроса 1
можно задавать размер шрифта в em, он будет зависеть от размера шрифта своего родителя

Использовать единицу измерения vw.
vw = 1 % от ширины пользовательской части окна браузера.

p {
font-size: 5vw; /* 5% от viewport */
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
thoozu
@thoozu
Веб-разработчик
Можно использовать медиа-запросы на различных разрешениях экрана и уже в зависимости от них менять стили объектов: https://itchief.ru/lessons/html-and-css/css-media-...
Ответ написан
Комментировать
@eandr_67
web-программист (*AMP, Go, JavaScript, вёрстка).
Не bootstrap, но универсальный механизм: css-live.ru/articles/matematika-css-shlyuzov.html
Ответ написан
@louise170
Я пользуюсь возможностями sass, который есть в Бутстрапе.
Сначала задаю нужные мне брейкпойнты.
$grid-breakpoints: (
xs: 0,
ss: 320px,
sm: 480px,
md: 768px,
lg: 992px,
xl: 1200px
);
Заметьте брейкпойна "ss" в Бутстрапе по-умолчанию нет. Но вообще можно добавить любые нужные вам брейкпойнты.

Потом для текстов пользуюсь возможностями, которые предоставляют миксины.
@include media-breakpoint-down(xl) {
/* тут пишите нужные размеры для заголовков и др. текстовых тегов */
}

@include media-breakpoint-down(lg) {
/* тут пишите нужные размеры для заголовков и др. текстовых тегов */
}

@include media-breakpoint-down(md) {
/* тут пишите нужные размеры для заголовков и др. текстовых тегов */
}

@include media-breakpoint-down(sm) {
/* тут пишите нужные размеры для заголовков и др. текстовых тегов */
}

@include media-breakpoint-down(ss) {
/* тут пишите нужные размеры для заголовков и др. текстовых тегов */
}

@include media-breakpoint-down(xs) {
/* тут пишите нужные размеры для заголовков и др. текстовых тегов */
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы