LabEx
ВходРегистрация

Реактивная жидкая типографика с использованием CSS

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы узнаем, как реализовать жидкую типографию с использованием CSS. Жидкая типографика обеспечивает масштабирование текста в соответствии с шириной viewport, делая его более адаптивным и доступным для различных размеров экранов. Используя функцию clamp() и формулу для вычисления адаптивных значений для font-size, мы можем создать более динамический и удобный для пользователя дизайн.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 94%. Он получил 100% положительных отзывов от учащихся.

Жидкая типографика

В ВМ уже предоставлены файлы index.html и style.css.

Для создания текста, размер которого будет меняться в зависимости от ширины viewport, можно использовать CSS. Одним из способов является использование функции clamp() для установки минимального и максимального размеров шрифта. Другой способ - использование формулы для вычисления адаптивного значения размера шрифта. Вот пример HTML-элемента с классом fluid-type:

<p class="fluid-type">Hello World!</p>

Вот соответствующий CSS-код, который устанавливает размер шрифта так, чтобы он изменялся между 1rem и 3rem в зависимости от ширины viewport:

.fluid-type {
  font-size: clamp(1rem, 8vw - 2rem, 3rem);
}

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по жидкой типографии. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.