Отзывчивый размер шрифта
Уверен, что никому не нужно объяснять почему сайты должны быть гибкими и адаптивными. Все используют проценты и медиа-запросы в своей верстке. Сейчас это уже стандарт.
Но типографика до недавнего времени не была столь гибкой. Все что мы могли — изменять размеры шрифта от брейкпоинта к брейкпоинту. В таком случае мы получали скорее адаптивную типографику нежели отзывчивую. Для каждого медиа-запроса нужно задавать свои значения. Можно конечно использовать компонентный подход с относительными размерами шрифта, что может существенно ускорить процесс редактирования, но принципиально это ничего не меняет. При перемещении компонента в другое место нужно будет опять пробегать по всем медиа запросам и подставлять новые значения.
Но потом появились они — vw, vh, vmin, vmax — единицы измерения, которые базируются на viewport. У нас появился шанс на отзывчивую типографику.
Коротко о viewport-зависимых единицах
100vw равно ширине (100vh — высоте) экрана в пикселях (или будет приведено к другим величинам если использовать в calc()). 100vmax — равно большему из пары высота/ширина, 100vmin — меньшему. Сразу же начали появляться рецепты использования этих чудо величин в типографике.
Но в таком виде их сложно контролировать. Иногда попадались рецепты с использованием каких-то магических процентных величин. Но меня не устраивал вариант разбираться откуда они, а потом считать или подбирать вручную их для получения нужных мне размеров в моих условиях.
Задача
Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport. Например, при ширине экрана в 480px иметь ровно 16px, а при 1280px — 24px.
Путь к решению
Вспомнив курс школьной математики пришел к выводу что моя задача не что иное, как уравнение прямой проходящей через 2 точки. Первая точка — меньшая ширины экрана и размер шрифта на ней, вторая — бОльшая ширина и соответствующий ей размер шрифта.
На оси X — ширина окна браузера, на оси Y — наш размер шрифта. Получаем уравнение с двумя неизвестными:
y — наш неизвестный размер шрифта, x — текущий размер экрана. x1 — минимальное значение шрифта, x2 — максимальное значение шрифта. y1 и y2 минимальное и максимальные значение ширины экрана соответственно.
А теперь самое интересное: имея CSS функцию calc() и текущее значение вьюпорта благодаря vw можно получить динамический размер шрифта:
Эту формулу уже можно использовать в чистом CSS. Только нужно помнить, что при операциях умножения/деления хотя бы один из аргументов должен быть без единиц измерения, а при сложение/вычитании — оба с единицами. Подставив наши значения получим рабочий вариант (обратите внимание на использование единиц измерения):
Единицы измерений можно использовать любые, главное, чтобы они совпадали. Тоже самое, только в rem:
Используем Sass/SCSS
Имея под рукой такой инструмент как Sass можно большую часть вычислений спрятать от браузера.
Для этого больше подойдет следующее уравнение прямой:
Коеффициенты k и b можно получить из уравнения прямой по двум точкам:
В случае, если мы хотим иметь возможность использовать не только px но и другие единицы измерений, можно передавать их одним из параметров:
Для защиты от неверно введенных данных, можно обрезать единицы измерений при получении данных. Для этого можно использовать функцию strip-unit или взять ее из библиотеки bourbon:
Расширяем возможности нашей функции
Функцию для вычисления размера шрифта мы имеем. Теперь на ее основе можно создать миксин, который можно расширять как угодно.
Например, мы хотим фолбек для старых браузеров:
Теперь можно в качестве фолбека передавать оптимальный размер шрифта на случай, когда vw не поддерживается.
Можно ограничить размеры шрифта нашим минимальным и/или максимальным значением:
Теперь при ширине экрана меньше 480px шрифт всегда будет 16px, после 480 он станет резиновым, а после 1280px всегда будет 24px.
Результат
Мы получили базовую функцию, которая выполняет весь основной функционал:
Для ее расширения использовались миксины, с помощью которых можно сделать фоллбеки, ограничения, конвертацию единиц измерения и многое другое. Поиграться со всем этим можно на codepen. Если Вы не хотите использовать Sass здесь вы найдете способ вычислений на чистом CSS.
Как сделать резиновый текст?
В нем написан текст размером в 28 пикселей в одну строчку. Необходимо сделать так, чтобы при уменьшении экрана также вместе с резиновым блоком уменьшался бы размер шрифта, при этом текст также должен быть написан в одну строчку.
Если это невозможно реализовать через обычный html и css то прошу помочь небольшим js скриптом.
Прошу вашей помощи в реализации данного вопроса.
Вариант еще проще я встретил вот здесь: Можно ли сделать резиновый шрифт в css?
Это возможно сделать средствами css. Демонстрация работы
Правда вам надо будет придумать, как вычислить эти самые новые пиксели. Ведь разные шрифты имеют разный размер букв и надо тогда считать количество символов, считать ширину строки из них и подгонять под них размер шрифта.
Петр Варягин дал конкретный и простой ответ, но при значительном уменьшении размера окна шрифт может стать плохо различимым. Поэтому предлагаю сделать как использую я в своих проектах, учитывая, что тут можно еще задать первичный опорный размер, если при малой ширине шрифт плохо читаемый. при этом сначала удобно выставить нужные значения на минимально возможном размере отображения, а затем подгонять коэффициент на максимальном, повторяя при необходимости.
Адаптивные заголовки (текст) на чистом CSS
Расшифровка формулы адаптивного заголовка
Адаптивный режим просмотра на CodePen
Упрощаем при помощи Sass/Scss
- Firebug — незаменимый инструмент каждого web-разработчика
- CSS анимация на сайте посредством библиотеки Animate.css
- Основы семантической верстки на HTML5
- Emmet — реактивное написание кода html/css
- Моя сборка для верстки сайтов Gulp + Webpack
Почему бы не использовать чистый Mobile First?
Можно. Из проекта в проект подход может меняться.
наткнулась на Ваш блог случайно, искала как использовать плагин prettify в саблайме. И вот решила посмотреть что еще интересного. Вот заметка про адаптивные заголовки — просто подарок! Спасибо!
Рад был помочь. Вам спасибо!
Подпишитесь на рассылку, чтобы не пропустить новые материалы на блоге.
Получайте уведомления в соц.сетях о выходе новых материалов. Например, пользователи Телеграм получают раньше всего рассылку.
Адаптивные размеры шрифтов на CSS
Вы уже знаете, что единицы rem считаются относительно размера шрифта корневого элемента, по умолчанию равного 16px :
Такую особенность используют, чтобы массово менять размеры шрифтов при изменении ширины экрана. Давайте посмотрим, как это делается.
Пусть нашим тегам заданы следующие размеры:
Давайте сделаем так, чтобы при изменении ширины экрана адаптивно изменялись размеры, заданные через rem . Для этого с помощью медиазапросов будем менять размер шрифта корневого элемента: