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

Question

[a_palanski]

Добрый вечер, подскажите, как в bootstrap сделать чтобы текст уменьшался вместе с блоком на разных устройствах? А то на маленьких разрешениях блок получается адаптивный, а текст начинает выходить за рамки

Answer 1

[Александр Михайленко]

можно задавать размер шрифта в em, он будет зависеть от размера шрифта своего родителя

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

p {
font-size: 5vw; /* 5% от viewport */
}

Comments

[a_palanski]

Спасибо большое

Answer 2

[Влад]

Можно использовать медиа-запросы на различных разрешениях экрана и уже в зависимости от них менять стили объектов: https://itchief.ru/lessons/html-and-css/css-media-...

Answer 3

[Андрей Ежгуров]

Не bootstrap, но универсальный механизм: css-live.ru/articles/matematika-css-shlyuzov.html

Comments

[dom1n1k]

Техника полезная, но задачу автора не решает, поскольку размер текста привязывается ко вьюпорту, а ему нужно к блоку. Тут без JS никак.

[Андрей Ежгуров]

dom1n1k, У нас же bootstrap'овская 12-колоночная сетка. В которой вполне понятно, при каком разрешении какую часть экрана займёт блок. Так что ширина блока спокойно пересчитывается от ширины экрана.

Answer 4

[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) {
/* тут пишите нужные размеры для заголовков и др. текстовых тегов */
}