Вам нужно, чтобы ваш веб-сайт или приложение хорошо выглядело на всех типах дисплеев? Вот где на помощь приходит адаптивная CSS-типографика.

Разработка веб-сайта с таким количеством контрольных точек может быть утомительной. В CSS есть много новых приемов, которые нужно изучить, независимо от того, являетесь ли вы опытным разработчиком или разработчиком среднего уровня.

Но как начать работу с адаптивной типографикой? Вот как можно предпринять шаги для адаптации веб-страниц к любому размеру экрана.

Важность адаптивной типографики

Типографика играет жизненно важную роль в веб-разработке и дизайне, обеспечивая удобочитаемость, удобство использования и общую эстетику веб-сайта. Все хотят адаптивный сайт. Было бы здорово, если бы текст или шрифты автоматически подстраивались под разные размеры экрана? Другие преимущества адаптивной типографики в веб-разработке включают следующее:

  • Это улучшает общее взаимодействие с пользователем на различных устройствах или размерах экрана, обеспечивая удобочитаемость и разборчивость.
    • instagram viewer
  • Это повышает доступность за счет размещения пользователей с нарушениями зрения или другими ограниченными возможностями. Он учитывает различные пользовательские настройки, такие как настраиваемый размер шрифта.
  • Согласованная типографика на всех устройствах и разрешениях помогает сохранить индивидуальность бренда и визуальное единство.

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

Файл HTML-кода

index.html
HTML>
<HTMLязык="ан">
<голова>
<метакодировка="УТФ-8">
<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1,0">
<связьотн.="таблица стилей"href="стиль.css">
<заголовок> Отзывчивая типографика заголовок>
голова>
<тело>
<дивсорт="контейнер">
<h1> Лорем ипсум h1>
<п> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ут, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
п>
див>
тело>
HTML>

Файл кода CSS

/*style.css*/
тело{
отображать: сгибаться;
выравнивание содержания: центр;
выравнивание элементов: центр;
высота: 100вх;
}
.контейнер{
ширина: 400пикс.;
фоновый цвет: античныйбелый;
набивка: 15пикс.;
коробка-тень:0 2пикс. 5пикс.RGBA(0,0,0, 0.1) ;
}
h1{
цвет: ярко-розовый;
}

Теперь давайте рассмотрим некоторые эффективные методы и приемы реализации адаптивной типографики с помощью CSS.

1. зажим

Это современная техника типографики CSS, которая позволяет и гарантирует, что размер шрифта элемента остается в пределах определенного диапазона. Функция фиксации «Clamp()» принимает три параметра: минимальное значение, идеальное значение и максимальное значение. Функция зажима не ограничивается типографикой. Его можно использовать для изображений, карточек, видео и других медиафайлов. Вот как это работает.

Зажим (минимальное значение, идеальное значение, максимальное значение): 

h1{
размер шрифта: зажим(2бэр, 5оч, 3бэр);
}
п{
размер шрифта: зажим(1бэр, 3оч, 2бэр);
}

В этом примере размеры шрифта для заголовка и абзаца задаются с помощью функции «clamp()». Для заголовка «h1» установлено минимальное значение «2rem», что гарантирует, что размер шрифта не будет меньше удвоенного размера основного шрифта. Идеальное или предпочтительное значение установлено на «5vw», что составляет 5% ширины окна просмотра, что делает его чувствительным к разным размерам экрана. Максимальное значение установлено на «3 rem», что гарантирует, что размер шрифта не будет превышать размер корневого шрифта более чем в три раза. И наоборот для стиля абзаца.

Лучше всего использовать ширину окна просмотра «vw» или процентное значение «%» в качестве идеального значения, так как это позволяет пропорционально масштабировать свойство в зависимости от доступного пространства, делая дизайн более отзывчивым. Убедитесь, что вы знаете какой модуль CSS вы должны использовать для вашего сценария.

Это наиболее распространенная техника типографики, используемая разработчиками. Это включает в себя создание медиа-запросов для каждой точки останова. Это позволяет применять определенные стили в зависимости от размера экрана. Вот иллюстрация: 

/* Размер шрифта по умолчанию */
h1{
размер шрифта: 38пикс.;
}
п{
размер шрифта: 20пикс.;
}
/* Размер шрифта для маленьких экранов */
@СМИ (Максимальная ширина:800 пикселей){
h1{
размер шрифта: 32пикс.;
}
п{
размер шрифта: 18пикс.;
}
}
/* Размер шрифта для небольших экранов */
@СМИ (Максимальная ширина:400 пикселей){
h1{
размер шрифта: 28пикс.;
}
п{
размер шрифта: 15пикс.;
}
}

В этом примере для заголовка и абзаца установлено значение по умолчанию от «38px» до «20px» соответственно. Затем задаются условия для меньшего размера экрана, чтобы макет реагировал на мобильные телефоны. Вы можете создать столько медиа-запросов, сколько захотите, в зависимости от дизайна и скорости отклика, которые вы хотите, среди множества других CSS-трюки для медиа-запросов, которые вы должны знать.

3. Пользовательские свойства CSS

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

:корень {
--заголовок-размер-шрифта: 3бэр;
--размер шрифта абзаца: 1.5рем;
}
h1{
размер шрифта: вар(--заголовок-размер-шрифта);
}
п{
размер шрифта: вар(--размер шрифта абзаца);
}
@СМИ (Максимальная ширина:800 пикселей){
:корень {
--заголовок-размер-шрифта: 2бэр;
--размер шрифта абзаца: 0.9рем;
}
}
@СМИ (Максимальная ширина:400 пикселей){
:корень {
--заголовок-размер-шрифта: 1.5рем;
--размер шрифта абзаца: 0.8рем;
}
}

В этом примере свойство CSS установлено на корневом уровне, что позволяет нам получить к нему глобальный доступ. --heading-font-size и --paragraph-font-size являются описательными именами для заголовка и абзаца, соответственно, со значениями по умолчанию для обоих. Этот метод можно повторно использовать для различных медиа-запросов, чтобы обеспечить согласованность по всем направлениям.

Рекомендации по адаптивной типографике

Разработчики часто используют ширину области просмотра (vw) непосредственно для типографики. Хотя это просто и, кажется, работает, оно становится крошечным на маленьких экранах и очень большим на больших экранах. Это также происходит, когда вы увеличиваете и уменьшаете масштаб своей страницы. Если можете, избегайте прямого использования видового экрана;

h1{
размер шрифта: 2вх;
 }

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

Адаптивная типографика — ключ к читабельному веб-дизайну

Адаптивная типографика играет ключевую роль в веб-дизайне и разработке. Внедряя такие методы и приемы, как фиксация, медиа-запросы и настраиваемые свойства CSS, вы можете обеспечить масштабирование типографики для различных размеров экрана и устройств. Есть так много техник, которые нужно изучить, пытаясь добиться отзывчивости с помощью CSS, — используйте эти техники, чтобы начать развивать свой опыт в этой области.