10 технологий для адаптивной верстки текста о которых вы могли не знать

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

Адаптивный LESS 

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

Использование параметра VW(viewport)

 В этом примере блок vw используется для автоматического форматирования текста в соответствии с шириной окна просмотра. И это фактически поддерживается (по крайней мере частично), вплоть до IE 11.

Текст в одну строку который всегда хорошо смотрится

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

Одинаковые вертикальные отступы

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

Управление повторяющимися параметрами

Свойства CSS (так называемые «переменные») являются функцией «must-have», которую разработчику стоит использовать для оптимизации кода. Они работают подобно переменной в PHP или JavaScript, поскольку их можно вызвать в любое время и избавить вас от тонны повторения. Вот пример, который использует переменные вместе с функцией CSS calc для автоматического изменения размера текста.

Адаптивный текстовый слайдер

Текстовый слайдер хорош в том, что это невероятно легкий способ привлечь внимание к контенту. Этот адаптивный пример использует чистый CSS вместе с Bootstrap для создания чего-то привлекательного и функционального.

Еще один способ оставить текст на одной строке под размер экрана

В то время как мы ранее смотрели на пример, который сохранял текст в одной строке по размеру экрана, этот отличается тем, что при необходимости перемещает элементы в новую строку. Тем не менее, он все равно будет обеспечивать нужный вид текста Responsive Text Auto-scale text

Адаптивный SASS

Мы уже посмотрели на LESS, так что мы должны отдать SASS и некоторую любовь. Это обеспечивает очень плавный переход в размере текста при изменении области просмотра.

Адаптация от количества символов

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

Итог:

Как вы видите, существует целый ряд различных подходов, которые вы можете предпринять для реализации адаптивного текста в вашем дизайне. Приятно, что так много методов автоматические — вам не нужно беспокоиться о том, чтобы делать собственные вычисления для небольших экранов. Это экономит время и главное работает просто.

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