Адаптивная верстка шрифты размеры

«Адаптивный» размер шрифта с использованием чистого CSS

От автора: бывают случаи, когда желательно иметь шкалу размера шрифта между двумя крайностями в зависимости от ширины экрана. Странно то, что я видел, как люди используют, чтобы достичь этого, например, RFS. Сам RFS представляет собой пример того, как НЕ делать это в эпоху вычислений и сравнений CSS3.

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

Математика

Ирония в том, что это на самом деле довольно просто реализовать. Допустим, вам нужен размер шрифта 1em как минимум, 4em как самый большой, а масштаб до максимального размера должен быть основан на 75rem. 75rem составляет 1200 пикселей для 16 пикселей — для обычных пользователей, 1500 пикселей — 20 пикселей для пользователей с крупным шрифтом, таких как я, и 2400 пикселей на многих устройствах 4k.

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Вы также можете просто «посчитать сами»:

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

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

Основные отличия от других реализаций

Вместо того, чтобы использовать медиа-запросы, чтобы вручную указывать максимальный размер где-то еще, мы можем с помощью min / max жестко указать как минимальный, так и максимальный размер в формуле. Один простой вызов справится со всем этим. Вместо того, чтобы думать (или писать код), чтобы сказать (max-width: 1200px) или что-то вроде отдельного медиа-запроса с максимальным значением в нем, мы просто помещаем все это в одно объявление.

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

Точно так же он на 100% основан на EM, поэтому вы не раздумываете о удобстве использования и доступности, разбираясь в пикселях. Опять же, как я уже говорил тысячи раз за последние полтора десятилетия, если вы используете размер шрифта в EM / %, отступы, поля и медиа-запросы должны ВСЕ также основываться на EM. Не смешивайте и не подбирайте, иначе макет СЛОМАЕТСЯ для пользователей нестандартного размера шрифта… Таких как и я, у которого 20px == 1REM на моем ноутбуке и рабочей станции, и 32px == 1EM в моем медиацентре.

Итак, давайте сделаем это!

Возьмем простой раздел страницы:

Источник

Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями

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

Итак, задача. Указывать значение по макету, а также минимальное значение при котором текст или заголовок хорошо бы смотрелся на мобильных устройствах, например iPhone 5 (320px). При этом шрифт бы адаптировался, увеличиваясь либо уменьшаясь в зависимости от ширины экрана.

Берем исходные значения из макета, к примеру заголовок H1 размером 40px. Так же нам нужна ширина всего полотна макета, к примеру 1280px.

Для получения минимального значения шрифта верстаем заголовок по макету и, с помощью средств разработчика Chrome (F12) выбираем нужный минимальный размер экрана и подбираем размер шрифта меняя значение пока текст не будет выглядеть адекватно. У меня получилось 24px

После этого в CSS, вместо font-size: 40px; пишем следующее.

font-size: calc(24px + 16 * (100vw / 1280)); 

Где 24px это наш минимальный шрифт, 16 – разница между шрифтом по макету 40 и минимальным шрифтом 24 (40-24 = 16). 100vw – это полная текущая ширина вьюпорта (экрана) 1280 – это ширина макета.

Тестируем и получаем отзывчивый шрифт, который полностью соответствует размеру по макету.

Но, на размере в 320px мы не увидим желаемого результата, а именно шрифта размером 24px. Это связано с тем, что мы никак не указали минимальный размер экрана именно в 320px.

Для решения ситуации пишем медиа запрос для 767px, и внутри меняем формулу:

Тут мы отнимаем 320px от полной ширины вьюпорта, а так же к добавочному числу 16 мы прибавляем еще его 70% (16 + 16 * 0.7)

Проверяем и видим полное соответствие поставленной задаче! При этом переход в брейк поинте сделан бесшовно и не заметно!

Конечно же мы можем закрыть все это в SCSS миксин:

$maxWidth: 1280; @mixin adaptiv-font($pcSize, $mobSize) < $addSize: $pcSize - $mobSize; $addMobSize: $addSize + $addSize * 0.7; @media (max-width: 767px) < font-size: calc(#+ # * ((100vw - 320px) / #)); > @media (min-width: 767px) < font-size: calc(#+ # * (100vw / #)); > > 

И подключать следующим образом:

Можно и вовсе избавиться от медиа запроса:

$maxWidth: 1280; @mixin adaptiv-font($pcSize, $mobSize) < $addSize: $pcSize - $mobSize; $maxWidth: $maxWidth - 320; font-size: calc(#+ # * ((100vw - 320px) / #)); > 

Буду рад прочесть в комментариях чем еще можно улучшить это решение. Спасибо за внимание!

Источник

Отзывчивый размер шрифта

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

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

Но потом появились они — vw, vh, vmin, vmax — единицы измерения, которые базируются на viewport. У нас появился шанс на отзывчивую типографику.

Коротко о viewport-зависимых единицах

100vw равно ширине (100vh — высоте) экрана в пикселях (или будет приведено к другим величинам если использовать в calc()). 100vmax — равно большему из пары высота/ширина, 100vmin — меньшему. Сразу же начали появляться рецепты использования этих чудо величин в типографике.

Но в таком виде их сложно контролировать. Иногда попадались рецепты с использованием каких-то магических процентных величин. Но меня не устраивал вариант разбираться откуда они, а потом считать или подбирать вручную их для получения нужных мне размеров в моих условиях.

Задача

Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport. Например, при ширине экрана в 480px иметь ровно 16px, а при 1280px — 24px.

Путь к решению

Вспомнив курс школьной математики пришел к выводу что моя задача не что иное, как уравнение прямой проходящей через 2 точки. Первая точка — меньшая ширины экрана и размер шрифта на ней, вторая — бОльшая ширина и соответствующий ей размер шрифта.

На оси X — ширина окна браузера, на оси Y — наш размер шрифта. Получаем уравнение с двумя неизвестными:

y — наш неизвестный размер шрифта, x — текущий размер экрана. x₁ — минимальное значение шрифта, x₂ — максимальное значение шрифта. y₁ и y₂ минимальное и максимальные значение ширины экрана соответственно.

А теперь самое интересное: имея CSS функцию calc() и текущее значение вьюпорта благодаря vw можно получить динамический размер шрифта:

font-size: calc( (100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);

Эту формулу уже можно использовать в чистом CSS. Только нужно помнить, что при операциях умножения/деления хотя бы один из аргументов должен быть без единиц измерения, а при сложение/вычитании — оба с единицами. Подставив наши значения получим рабочий вариант (обратите внимание на использование единиц измерения):

font-size: calc( (100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);

Единицы измерений можно использовать любые, главное, чтобы они совпадали. Тоже самое, только в rem:

font-size: calc( (100vw - 30rem)/(80 - 30) * (1.5 - 1) + 1rem);

Используем Sass/SCSS

Имея под рукой такой инструмент как Sass можно большую часть вычислений спрятать от браузера.
Для этого больше подойдет следующее уравнение прямой:

Коеффициенты k и b можно получить из уравнения прямой по двум точкам:

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max) < $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b * 1px; @return calc( #* 100vw + # ); > .fluid-font-size

В случае, если мы хотим иметь возможность использовать не только px но и другие единицы измерений, можно передавать их одним из параметров:

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max, $units: px) < $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b + $units; @return calc( #* 100vw + # ); > .fluid-font-size

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

@function strip-unit($number) < @if type-of($number) == 'number' and not unitless($number) < @return $number / ($number * 0 + 1); >@return $number; > @function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) < $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc( #* 100vw + # ); >

Расширяем возможности нашей функции

Функцию для вычисления размера шрифта мы имеем. Теперь на ее основе можно создать миксин, который можно расширять как угодно.

Например, мы хотим фолбек для старых браузеров:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) < @if ($fallback) < font-size: $fallback; >font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); > .fluid-font-size

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

Можно ограничить размеры шрифта нашим минимальным и/или максимальным значением:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) < font-size: $f-min; @media (min-width: $w-min) < @if ($fallback) < font-size: $fallback; >font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); > @media (min-width: $w-max) < font-size: $f-max; >> .fluid-font-size

Теперь при ширине экрана меньше 480px шрифт всегда будет 16px, после 480 он станет резиновым, а после 1280px всегда будет 24px.

Результат

Мы получили базовую функцию, которая выполняет весь основной функционал:

@function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) < $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc( #* 100vw + # ); >

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

Источник