Как задать размер шрифта относительно ширины родительского блока?

Рейтинг: 0Ответов: 2Опубликовано: 16.07.2023

Есть текстовый блок с максимальной шириной 500рх.

HTML:

<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing</div>

CSS:

.text {
    margin: 50px auto;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    border: 5px solid #fff;
    font-weight: 700;
    font-size: 24рх;
    line-height: 1.5;
    color: #fff;
    text-align: center;
}

Можно ли как-то задать размер шрифта относительно ширины родительского блока, чтобы при уменьшении ширины блока менее 500рх шрифт также уменьшался пропорционально ширине?

css
Источник: Stack Overflow на русском

Ответы

▲ 0

Да можно, с помощью calc

.text {
  font-size: calc(4vw + 4vh + 2vmin);
}

с calc можно делать разные вычисления. Можно почитать тут https://habr.com/ru/articles/310186/ или погуглить(информации полно) Но если вы имеете ввиду уменьшение экрана, под смартфоны и тд, лучше воспользоваться @media запросами. Можно тут почитать или так же загуглить https://html5book.ru/css3-mediazaprosy/

▲ 0

Используйте медиавыражение с calc.

@media screen and (max-width: 500px) {
  .text {
    font-size: calc(100vw / (500 / 24));
  }
}