3 метода сделать вашу типографику

CSS3 03.09.2021

3 метода сделать вашу типографику отзывчивой

👴 Метод #1 Старая школа

Самый простой подход к адаптивной типографике - это использование медиа-запросов для увеличения размера шрифта ваших текстовых элементов.


h1 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

@media (min-width: 48rem) {
  h1 {
    font-size: 3em;
  }
  
  p {
    font-size: 1.25em;
  }
}

🤯 Метод #2 Функция зажима

Продвинутый подход к отзывчивой типографике заключается в использовании функции зажима с настраиваемыми свойствами CSS.

Функция CSS clamp () принимает три значения: минимальное значение, предпочтительное значение и максимальное значение. Если ваше предпочтительное значение изменяется в зависимости от ширины области просмотра (т. е. единиц vw), у вас будет гибкая типографика, которая адаптируется к размеру области просмотра и ограничена минимальным / максимальным значениями.


h1, p {
  font-size: clamp(var(--min), var(--val), var(--max));
}

h1 {
  --min: 2em; /* minimum value */
  --val: 5vw; /* preferred value = 5% viewport width */
  --max: 3em; /* maximum value */
}

p {
  --min: 1em;
  --val: 2.5vw;
  --max: 2em;
}

👌 Метод #3 Множитель

Пользовательские свойства CSS отлично подходят для одновременного обновления нескольких элементов. Вводя переменную --text-multiplier в размер текстовых элементов, вы можете увеличивать / уменьшать их все в определенной точке останова, редактируя переменную.


h1 {
  font-size: calc(2em * var(--text-multiplier, 1));
}

p {
  font-size: calc(1em * var(--text-multiplier, 1));
}

@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.25;
  }
}