Как сделать адаптивный текст
Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями
Адаптивный или отзывчивый шрифт — это мечта любого веб-разработчика. Я пересмотрел множество вариантов реализации, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться. Бонус SCSS миксин!
Итак, задача. Указывать значение по макету, а также минимальное значение при котором текст или заголовок хорошо бы смотрелся на мобильных устройствах, например iPhone 5 (320px). При этом шрифт бы адаптировался, увеличиваясь либо уменьшаясь в зависимости от ширины экрана.
Берем исходные значения из макета, к примеру заголовок H1 размером 40px. Так же нам нужна ширина всего полотна макета, к примеру 1280px.
Для получения минимального значения шрифта верстаем заголовок по макету и, с помощью средств разработчика Chrome (F12) выбираем нужный минимальный размер экрана и подбираем размер шрифта меняя значение пока текст не будет выглядеть адекватно. У меня получилось 24px
После этого в CSS, вместо font-size: 40px; пишем следующее.
Где 24px это наш минимальный шрифт, 16 – разница между шрифтом по макету 40 и минимальным шрифтом 24 (40-24 = 16). 100vw – это полная текущая ширина вьюпорта (экрана) 1280 – это ширина макета.
Тестируем и получаем отзывчивый шрифт, который полностью соответствует размеру по макету.
Но, на размере в 320px мы не увидим желаемого результата, а именно шрифта размером 24px. Это связано с тем, что мы никак не указали минимальный размер экрана именно в 320px.
Для решения ситуации пишем медиа запрос для 767px, и внутри меняем формулу:
Тут мы отнимаем 320px от полной ширины вьюпорта, а так же к добавочному числу 16 мы прибавляем еще его 70% (16 + 16 * 0.7)
Проверяем и видим полное соответствие поставленной задаче! При этом переход в брейк поинте сделан бесшовно и не заметно!
Конечно же мы можем закрыть все это в SCSS миксин:
И подключать следующим образом:
Можно и вовсе избавиться от медиа запроса:
Буду рад прочесть в комментариях чем еще можно улучшить это решение. Спасибо за внимание!
Без труда читаемый адаптивный текст с помощью единиц измерения на основе окна просмотра
Дата публикации: 2018-05-17
От автора: с тех пор как я создал BigText более семи лет назад, я был немного одержим красивым большим текстом. К сожалению, в моем собственном блоге заголовки были, если честно, не совсем выразительными. Я хотел немного подправить их и перейти от фиксированных размеров текста к динамическому — сделать адаптивный текст, который увеличивается с увеличением окна просмотра. Я видел много вариантов этого подхода с использованием обработчиков resize в JavaScript.
BigText, который использует JavaScript для автоматического поиска нужного размера текста (это немного затратно и медленно).
FitText.js (от Дейва Рупперта) использует заданный разработчиком коэффициент масштабирования для линейного изменения размера текста (быстрый, но требует настройки).
Еще одним популярным вариантом является FlowType.JS — очень похожая концепция.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Были и другие реализации этого подхода к изменению размера текста в JavaScript. Но, насколько я могу судить, нам представилась возможность обойтись без них, когда в 2012 году единицы измерения на основании окна просмотра получили нормальную поддержку браузеров! Если CSS может сделать эту работу, пусть он ее и делает. Удалите ненужные JavaScripts — все!
Я уже могу представить первое возражение в комментариях к посту: плагины JavaScript могут изменять размер в зависимости от размеров элемента, а не только окна просмотра! Хорошо — действительно это так, но это просто еще один довод в пользу запросов контейнера. Мы можем справиться с этим с помощью CSS — это просто требует дополнительной, кропотливой работы, связанной с поддержанием кода для пределов, при которых наш текст должен изменяться, и когда он должен быть фиксированным. Но это все же лучше, чем обработчик события resize JavaScript (по моему скромному мнению). Если мы знаем, где размещаются в макете элементы, мы можем просто скорректировать значения единиц окна просмотра, чтобы имитировать что-то подобное на единицы контейнера.
Пример
Текущие спецификации макета для постов в моем собственном блоге следующие:
Базовый размер — 100% гибкой ширины.
Контент имеет максимальную ширину: 589px (31em при размере шрифта: 19px) и поддерживает эту максимальную ширину даже при добавлении правого блока.
(Эта спецификация макета напоминает мне sizes от srcset с адаптивными изображениями, хм …)
Это довольно простой пример. У нас есть два предела: контрольная точка, с которой мы будем переключаться на использование единиц окна просмотра, и верхний предел, когда мы достигаем максимальной ширины контента (589 пикселей).
Вы можете настроить контрольные точки и минимальный размер шрифта для своего случая:
«Адаптивный» размер шрифта с использованием чистого CSS
Дата публикации: 2020-11-16
От автора: бывают случаи, когда желательно иметь шкалу размера шрифта между двумя крайностями в зависимости от ширины экрана. Странно то, что я видел, как люди используют, чтобы достичь этого, например, RFS. Сам RFS представляет собой пример того, как НЕ делать это в эпоху вычислений и сравнений CSS3.
Хотя, к сожалению, такие проблемы распространены среди тех, кто использует бессмысленный мусор, такой как препроцессоры CSS, где, как и в случае с фреймворками, становится до боли очевидным, что те, кто создал такие системы — и те, кто их использует — явно не обладают квалификацией, чтобы написать хоть одну чертову строчку HTML, не говоря уже о том, чтобы применить к нему CSS, а затем иметь явную наглость рассказывать другим, как это сделать.
Математика
Ирония в том, что это на самом деле довольно просто реализовать. Допустим, вам нужен размер шрифта 1em как минимум, 4em как самый большой, а масштаб до максимального размера должен быть основан на 75rem. 75rem составляет 1200 пикселей для 16 пикселей — для обычных пользователей, 1500 пикселей — 20 пикселей для пользователей с крупным шрифтом, таких как я, и 2400 пикселей на многих устройствах 4k.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Вы также можете просто «посчитать сами»:
Это 4 в вычислениях просто должно соответствовать вашей 4em в вычислении min. Вам больше не нужен какой-то гигантский фреймворк, препроцессор или какой-либо другой мусор. Это простая математика, на которую CSS более чем способен сам по себе.
Затем переменные CSS можно использовать для хранения различных значений, чтобы облегчить их применение в вашем макете.
Основные отличия от других реализаций
Вместо того, чтобы использовать медиа-запросы, чтобы вручную указывать максимальный размер где-то еще, мы можем с помощью min / max жестко указать как минимальный, так и максимальный размер в формуле. Один простой вызов справится со всем этим. Вместо того, чтобы думать (или писать код), чтобы сказать (max-width: 1200px) или что-то вроде отдельного медиа-запроса с максимальным значением в нем, мы просто помещаем все это в одно объявление.
Это также позволяет фактически достичь минимума. Большинство таких попыток просто добавляют базовый размер к части ширины, что означает, что минимальный размер, который вы указываете, не является минимальным размером, который вы получаете или может когда-либо достичь макет.
Точно так же он на 100% основан на EM, поэтому вы не раздумываете о удобстве использования и доступности, разбираясь в пикселях. Опять же, как я уже говорил тысячи раз за последние полтора десятилетия, если вы используете размер шрифта в EM / %, отступы, поля и медиа-запросы должны ВСЕ также основываться на EM. Не смешивайте и не подбирайте, иначе макет СЛОМАЕТСЯ для пользователей нестандартного размера шрифта… Таких как и я, у которого 20px == 1REM на моем ноутбуке и рабочей станции, и 32px == 1EM в моем медиацентре.
Адаптивные заголовки (текст) на чистом CSS
Приветствую вас друзья! Хочу еще раз поздравить всех (на всякий случай для тех, кто не получал моего новогоднего поздравления) с наступившим Новым годом!
Давно не писал на своем блоге. Причина все таже — катастрофическая нехватка времени. Помимо всех моих забот, которых итак у меня не мало я ввязался в такую большую авантюру, как строительство собственного дома. По стройке я здесь писать не буду, создам для него отдельный проект. Но сейчас не об этом…
И так, сегодня поговорим о верстке и о таком трюке в CSS, который позволяет сделать наши заголовки адаптивными, причем размер может меняться плавно при уменьшении экрана браузера. Вообще, подзаголовками может подразумеваться любой текст на сайте.
Для динамичного уменьшения шрифта воспользуемся методом calc() в css.
Размер шрифта меняется в пределах от 30px (на большом экране) до 24px (на мобильном экране) с помощью формулы, которая работает в методе calc().
Расшифровку цифр я наглядно представил на картинке ниже.
Расшифровка формулы адаптивного заголовка
Итак, давайте разберем подробнее каждый компонент формулы.
1.5rem — минимальный размер шрифта на мобильном при ширине контейнера 320px. Для тех, кто не в курсе rem (root em) — это условная единица, которая определяется, исходя из базового размера шрифта тега html (корневой элемент). Напишу про em и rem более подробнее в другой статье. По умолчанию базовый размер шрифта, устанавливаемый браузером равняется 16px. Вы можете самостоятельно переопределить этот размер (я этого не делаю). В нашем примере минимальный размер шрифта на мобильном — это 24px: 24/16 = 1.5
6 — разница между максимальным и минимальным размерами шрифта. То есть: 30 — 24 = 6. Думаю, здесь все понятно.
100vw — максимальная ширина контейнера сайта на широкоформатном экране. Здесь не путаем с максимальной шириной окна браузера. Именно ширина контейнера! В моем примере она равняется 1200px. Обратите внимание, что заголовки H1-H6 являются блочными элементами в HTML и растягиваются на ширину своего родителя (если нет дополнительных стилей). Вы можете возразить, сказав, что под 100vw определяется именно ширина окна браузера, а не контейнера. Да, и будете правы. Вот этот момент обсудим чуть ниже.
320px — минимальная ширина контейнера сайта на мобильном устройстве. Минимальную ширину я обычно выставляю в 320px, если будет меньше, то появляется горизонтальный скролл.
880 — разница между максимальным размером контейнера сайта и минимальным размером контейнера сайта. То есть: 1200 — 320 = 880.
Если мы данную формулу просто применим к определенному заголовку, то на широком экране FullHD (1920×1080) получим огромный размер шрифта, несмотря на то, что определили максимальный размер (в моем случае — 30px). Здесь как раз сработало значение 100vw, которое мы указали, как максимальную ширину контейнера. Как быть? Прибегнем к медиа-запросам в css.
Как видно из кода css формула с адаптивным заголовком у нас работает только в пределах от 320 до 1200px, ниже и выше — фиксированные значения. Таким образом мы избавились от слишком крупного размера на широких экранах более 1200px и слишком мелкого шрифта на экранах менее 320px.
Адаптивный режим просмотра на CodePen
В принципе здесь все. Добавлю, что данную формулу можно использовать не только для заголовков, но и для любого другого текста. Я даже, было дело, таким образом динамически изменял поля и отступы — margin и padding.
Упрощаем при помощи Sass/Scss
Дополню для любителей верстать на препроцессоре Sass (не понимаю, как можно верстать на чистом css). Лично я запихнул все это дело в миксин и просто в нужном месте его вызываю, передав минимальный и максимальный размеры шрифта.
В данном миксине медиа-запросы я вызываю через миксины Bootstrap 4, так как использую данный фреймворк при верстке макетов.
Теперь там, где нужно вызываем миксин responsive-tlt.
Вот и все хитрости. На этом все. Если возникнут вопросы, то задавайте в комментариях. Помогу обязательно!
Как сделать адаптивный текст
Наличие фиксированного размера по сравнению с устройствами не всегда является хорошей идеей. Ключевым моментом является получение читаемого размера шрифта и удобной длины строки в большинстве видовых экранов. Элементы просмотра CSS и медиа запросы предоставляют средства для реализации гибкого размера шрифта.
Размер шрифта и длина строки
Существует множество разных представлений, на которых находится лучший размер шрифта пикселя, или является минимальным читаемым размером. Конечно, верно то, что большие шрифты более доступны и удобны для чтения. Тенденция последних лет заключалась в увеличении размеров шрифтов. Большинство сайтов сегодня используют размер шрифта от 14 до 18 пикселей для основного текста. Эксперты по изобилии рекомендуют размер шрифта не менее 16 пикселей.
Размер шрифта намного больше, чем кажется. Обратите внимание, что количество слов на строку также является ключевым. Мы все испытали стресс при чтении узких столбцов текста двумя словами на строку. Длинные линии, как правило, трудно сосредоточиться, потому что мы используем начало и конец строк в качестве ссылок неосознанно. Однако исследование 2005 года показало, что мы стремимся читать быстрее текст с длинными строками длиной до 95 символов.
Единицы просмотра CSS
Единицы просмотра CSS: vw, vh, vmin и vmax были созданы специально для того, чтобы длина в CSS, включая размер шрифта, была относительно размера видового экрана. Они позволяют получить действительно отзывчивый размер шрифта с его размером в процентах от ширины или высоты видового экрана.
Пиксели, ems, rems и медиа-запросы
1. px определяет высоту букв в пикселях CSS
2. em относительно размера шрифта родителя, например. 2em = 28px, если размер шрифта родительского элемента равен 14px.
3. rem (root em) относительно размера шрифта элемента html. 1 rem измеряет то же самое во всем документе. ems трудно поддерживать в правилах, вложенных слишком глубоко, но у rems нет проблем.
Размеры шрифтов и задаете их не в пикселях, а в em. Расчет такой: 1em = 16px и 1em = 100%
Расчет такой: 1em = 16px и 1em = 100%.
Например: берем заголловок, где нужн задать размер шрифта 30 пикселей. Здесь поможет колькулятор, что делим 30 на 16. Получается 1,875.
Остается поставить в CSS:
Если нужно задать размер текста 9 пикселей:
Задавая размеры шрифтов, а точнее в таком стиле, то можете не бояться, если шрифт начнет свое изменение в настройках браузера.
Как на самом деле сделать размер шрифта отзывчивым, и здесь появляются медиа-запросы. Если вы используете ems, просто измените размер шрифта html по мере необходимости и тщательно настройте детали.
Ответственные размеры шрифта с медиа-запросами
Никогда не подходите ниже 14px для текстового текста и старайтесь получать линии достаточно долго, не переусердствуй на больших экранах. Подсчитайте количество слов на строку, где попытайтесь сохранить ее ниже 20 во всех видовых экранах.
    |  |