< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Верстка Html5, Css3 » Адаптивные заголовки (текст) на чистом CSS

Адаптивные заголовки (текст) на чистом CSS

Адаптивные заголовки (текст) на чистом CSS

Приветствую вас друзья! Хочу еще раз поздравить всех (на всякий случай для тех, кто не получал моего новогоднего поздравления) с наступившим Новым годом!

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

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

1

Перейти на CodePen

Для динамичного уменьшения шрифта воспользуемся методом calc() в css.

h1 {
    /* 30px - 24px */
    font-size: calc(1.5rem + 6 * (100vw - 320px) / 880)
}

Размер шрифта меняется в пределах от 30px (на большом экране) до 24px (на мобильном экране) с помощью формулы, которая работает в методе calc().

Расшифровку цифр я наглядно представил на картинке ниже.


Расшифровка формулы адаптивного заголовка

Итак, давайте разберем подробнее каждый компонент формулы.

1.5rem — минимальный размер шрифта на мобильном при ширине контейнера 320px. Для тех, кто не в курсе rem (root em) — это условная единица, которая определяется, исходя из базового размера шрифта тега html (корневой элемент). Напишу про em и rem более подробнее в другой статье. По умолчанию базовый размер шрифта, устанавливаемый браузером равняется 16px. Вы можете самостоятельно переопределить этот размер (я этого не делаю). В нашем примере минимальный размер шрифта на мобильном — это 24px: 24/16 = 1.5

6 — разница между максимальным и минимальным размерами шрифта. То есть: 30 — 24 = 6. Думаю, здесь все понятно.

Читайте также:  Основы семантической верстки на HTML5

100vw — максимальная ширина контейнера сайта на широкоформатном экране. Здесь не путаем с максимальной шириной окна браузера. Именно ширина контейнера! В моем примере она равняется 1200px. Обратите внимание, что заголовки H1-H6 являются блочными элементами в HTML и растягиваются на ширину своего родителя (если нет дополнительных стилей). Вы можете возразить, сказав, что под 100vw определяется именно ширина окна браузера, а не контейнера. Да, и будете правы. Вот этот момент обсудим чуть ниже.

320px — минимальная ширина контейнера сайта на мобильном устройстве. Минимальную ширину я обычно выставляю в 320px, если будет меньше, то появляется горизонтальный скролл.

880 — разница между максимальным размером контейнера сайта и минимальным размером контейнера сайта. То есть: 1200 — 320 = 880.

Если мы данную формулу просто применим к определенному заголовку, то на широком экране FullHD (1920×1080) получим огромный размер шрифта, несмотря на то, что определили максимальный размер (в моем случае — 30px). Здесь как раз сработало значение 100vw, которое мы указали, как максимальную ширину контейнера. Как быть? Прибегнем к медиа-запросам в css.

/* Max-width 320px */
@media (max-width: 320px) {
    h1 {
        font-size: 24px
    }
}
/* Max-width 1200px and Min-width 320px */
@media (max-width: 1200px) and (min-width: 321px) {
    h1 {
        /* 30px - 24px */
        font-size: calc(1.5rem + 6 * (100vw - 320px) / 880);
    }
}
/* Min-width 1200px */
@media (min-width: 1201px) {    
    h1 {
        font-size: 30px;
    }
}

Как видно из кода css формула с адаптивным заголовком у нас работает только в пределах от 320 до 1200px, ниже и выше — фиксированные значения. Таким образом мы избавились от слишком крупного размера на широких экранах более 1200px и слишком мелкого шрифта на экранах менее 320px.

Читайте также:  7 советов по качественной верстке шаблона сайта

Демо смотрите на моем CodePen.

Адаптивный режим просмотра на CodePen

В принципе здесь все. Добавлю, что данную формулу можно использовать не только для заголовков, но и для любого другого текста. Я даже, было дело, таким образом динамически изменял поля и отступы — margin и padding.

Упрощаем при помощи Sass/Scss

Дополню для любителей верстать на препроцессоре Sass (не понимаю, как можно верстать на чистом css). Лично я запихнул все это дело в миксин и просто в нужном месте его вызываю, передав минимальный и максимальный размеры шрифта.

@function strip-units($number) {
    @return $number / ($number * 0 + 1);
}

@mixin responsive-tlt($minFz, $maxFz) {

    $raznostFz: strip-units($maxFz - $minFz);

    @media (max-width: 320px) {
        font-size: $minFz
    }

    @include media-breakpoint-only(xl) {
        font-size: $maxFz
    }

    @include media-breakpoint-between('320', lg) {
        font-size: calc(#{$minFz} + #{$raznostFz} * (100vw - 320px) / 790)
    }
}

В данном миксине медиа-запросы я вызываю через миксины Bootstrap 4, так как использую данный фреймворк при верстке макетов.

Теперь там, где нужно вызываем миксин responsive-tlt.

h1 {
    /* 36px - 24px */
    @include responsive-tlt(24px, 36px)
}

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

До встречи в других моих постах…

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (2 оценок, среднее: 4,50 из 5)
Загрузка...

Проверка орфографии

Система Orphus

2 комментария к статье "Адаптивные заголовки (текст) на чистом CSS"

  • Lara Авг 20, 2019 в 22:40

    наткнулась на Ваш блог случайно, искала как использовать плагин prettify в саблайме. И вот решила посмотреть что еще интересного. Вот заметка про адаптивные заголовки — просто подарок! Спасибо!

    • Заур Магомедов
      Заур Магомедов Авг 21, 2019 в 0:53

      Рад был помочь. Вам спасибо!

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]