[Из песочницы] Отзывчивый размер шрифта

Скрипты и советы | 16 сентября 2016 3 311

Уроки CSS на Хабрахабре, habrahabr.ru, Разработка веб-сайтов

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


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


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


Читать дальше →
[Перевод] Адаптация типографии под пользовательские предпочтения с помощью CSS

Способ настройки шрифта в соответствии с предпочтениями пользователей В данной статье рассматривается применение...

Подробнее
[Из песочницы] Изучить отзывчивый веб-дизайн за 5 минут

Привет, Хабр! Представляю вашему вниманию перевод статьи «Learn responsive web design in 5 minutes» автора Per. В этой...

Подробнее
Делаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера

Перед нами часто возникает задача, сделать текст отзывчивым в зависимости от размера экрана устройства. Казалось бы,...

Подробнее
[Перевод] Варианты использования вертикальных медиа-запросов в css

Мало кто знает, что в глубинах CSS спецификаций, кроме привычных «горизонтальных» медиа запросов, например, max-width:...

Подробнее
[Из песочницы] «Font-weight: bolder» для шрифтов со множеством начертаний

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

Подробнее
[Из песочницы] Максимальная адаптивность с минимальным количеством медиа запросов, или метод обратной адаптивности

"У всякой проблемы всегда есть решение — простое, удобное, и конечно ошибочное". — Генри Луис Менкен. Суть проблемы На...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями