Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 14000 

Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.

от 32900 

Подходит для небольших стартапов и тех, кто еще не рекламировал свой бизнес в интернете. Разработка сайта (до 5 страниц) + Яндекс Директ / ВК реклама.

от 69000 

Как сделать адаптивный текст css

Для того, чтобы сделать адаптивный текст в CSS, можно использовать несколько свойств CSS, чтобы текст масштабировался в зависимости от размера экрана и устройства.

Одним из таких свойств является font-size. Задавая значения font-size, которые зависят от ширины экрана, мы можем создавать адаптивный текст.

Вот пример кода CSS, который устанавливает размер шрифта для текста внутри элемента div в зависимости от ширины экрана:

div {
  font-size: 16px; /* базовый размер шрифта */
}

@media screen and (max-width: 600px) {
  div {
    font-size: 14px; /* уменьшаем размер шрифта для меньших экранов */
  }
}

@media screen and (max-width: 400px) {
  div {
    font-size: 12px; /* еще больше уменьшаем размер шрифта для самых маленьких экранов */
  }
}

В этом примере мы используем font-size для установки базового размера шрифта для текста внутри элемента div. Затем мы используем @media-запросы для настройки размера шрифта для разных размеров экрана.

В первом @media-запросе мы устанавливаем размер шрифта в 14 пикселей для экранов с шириной до 600 пикселей. Во втором @media-запросе мы устанавливаем размер шрифта в 12 пикселей для экранов с шириной до 400 пикселей.

Также можно использовать em для установки относительного размера шрифта в зависимости от базового размера шрифта. Например:

div {
  font-size: 16px;
  line-height: 1.4;
}

@media screen and (max-width: 600px) {
  div {
    font-size: 0.875em; /* уменьшаем размер шрифта до 14px, если браузер поддерживает em */
  }
}

@media screen and (max-width: 400px) {
  div {
    font-size: 0.75em; /* уменьшаем размер шрифта до 12px, если браузер поддерживает em */
  }
}

Здесь мы установили line-height для элемента div, чтобы определить высоту строки. Затем мы использовали font-size: 0.875em и font-size: 0.75em для уменьшения размера шрифта в 14 пикселей и 12 пикселей соответственно, если браузер поддерживает em для установки относительного размера шрифта.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.