falbar Простейший способ создать отзывчивые заголовки

Простейший способ создать отзывчивые заголовки

28 июля 2018 Перевод 555 0

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

Реклама

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

Разберем наш метод

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

  • Слева - логотип компании;
  • В центре - различные гиперссылки;
  • Справа – кнопка.

Ниже вы можете ознакомиться с упрощенной версией кода.

Первое - HTML, где мы группируем разделы в отдельные теги div. Это облегчает применение правил CSS и, в целом, создается более адаптивная версия кода.

<header>
    <div class="header-left">CoolLogo</div>
    <div class="header-center">
        <ul>
            <li><a href="#">Our products</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </div>
    <div class="header-right"><button>Buy now</button></div>
</header>

А теперь перейдём к CSS, который всего за пару строк выполняет всю работу по поиску нужных установок для каждого из разделов.

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Полная адаптивность

«Фишка» space-between всегда позаботиться о выравнивании, даже при изменении размера экрана. Однако если область просмотра становится слишком маленькой для горизонтального заголовка, ее можно сделать вертикальной, изменив свойство flex-direction в медиа запросе.

@media (max-width: 1000px){
    header{
        flex-direction: column;
        align-items: flex-start;
    }
}

Вывод

Подведем итог нашего краткого урока! Я надеюсь, что он был полезен и вы им воспользуетесь. Flexbox в настоящее время имеет довольно хорошую совместимость с браузером, поэтому если ваша пользовательская база IE не является достаточно мощной, то этот метод может быть использован, не причиняя никаких неудобств для других пользователей.

Чтобы узнать больше о flexbox и свойствах CSS, которые мы использовали, ознакомьтесь с этими ссылками:

  • Краткое руководство по flexbox;
  • Объяснение содержания;
  • Выравнивание элементов;
  • Flex направление.
Реклама
Комментариев еще не оставлено
no_avatar