Простейший способ создания адаптивной шапки
Оригинал: tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/
Перевод: Влад Мержевич
Создание симпатичной и адаптивной «шапки» сайта — процесс всегда непростой. Для этого приходилось использовать float или другие сложные трюки и даже вручную настраивать значения пикселей. Но всё это позади!
Техника, которую мы собираемся вам показать, основана на мощном режиме вёрстки Flexbox, который делает всю грязную работу за вас. Мы используем всего несколько свойств CSS для создания шапки, которая выровнена соответственно и выглядит хорошо для всех размеров экрана, при этом код остаётся чистым и потребует меньше ручной работы.
Техника
В нашем демонстрационном примере мы построили шапку, которая разделена на три части с типичным для шапки содержимым внутри:
- Левая часть — логотип компании.
- Средняя часть — разные ссылки.
- Правая часть — кнопка.
Ниже вы можете ознакомиться с упрощённой версией кода.
В первой вкладке располагается HTML, в котором мы группируем части через отдельные теги <div>. Это упрощает применение правил CSS и в целом порождает более организованный код.
В другой вкладке находится CSS, который буквально парой строк выполняет всю работу по нахождению нужных мест для каждой части.
Нажмите кнопку «Выполнить», чтобы открыть демонстрацию. Вы можете протестировать адаптивность, изменяя размеры фрейма.
<header> <div class="header-left">Логотип</div> <div class="header-center"> <ul> <li><a href="#">Продукция</a></li> <li><a href="#">Цены</a></li> <li><a href="#">Блог</a></li> </ul> </div> <div class="header-right"><button>Купить</button></div> </header>
header{
/* Включаем режим Flexbox. */
display: flex;
/* Распределяем элементы внутри шапки */
justify-content: space-between;
/* Выравниваем элементы вертикально по центру. */
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Простейший способ создания адаптивной шапки</title>
<link href='https://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet'>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font: normal 16px sans-serif;
padding: 0 10%;
background: #eee;
}
body .container{
max-width:1200px;
margin:0 auto;
}
/* Header */
header{
/* Включаем режим Flexbox. */
display: flex;
/* Распределяем элементы внутри шапки */
justify-content: space-between;
/* Выравниваем элементы вертикально по центру. */
align-items: center;
padding: 40px 100px;
color: #fff;
background-color: #488EAD;
}
.header-left{
font: normal 28px 'Fugaz One', cursive;
}
.header-left span{
color: #EAD314;
}
.header-center ul{
list-style: none;
}
.header-center ul li{
display: inline-block;
margin: 0 15px;
}
.header-center ul li a{
text-decoration: none;
color: #fff;
cursor: pointer;
font-weight: bold;
}
.header-right button{
color: #fff;
cursor: pointer;
font-weight: 800;
text-transform: uppercase;
padding: 12px 30px;
border: 2px solid #FFFFFF;
border-radius: 4px;
background-color: transparent;
}
.header-right button:hover {
background-color: rgba(255,255,255,0.1);
}
/* Основное содержимое */
.main-content{
padding: 60px 100px;
background-color: #fff;
line-height: 1.5;
color: #444;
}
.main-content h2{
margin-bottom: 38px;
}
.main-content p{
margin: 30px 0;
}
.main-content .placeholder{
margin: 40px 0;
height:380px;
background-color: #e3e3e3;
}
/* Медиа-запросы */
@media (max-width: 1200px){
header{
padding: 40px 60px;
}
.main-content{
padding: 100px 60px;
}
body {
padding: 0 5%;
}
}
@media (max-width: 1000px){
header{
/* Меняем оси шапки, делая её вертикальной. */
flex-direction: column;
/* Выравниваем элементы шапки с начала (по левому краю). */
align-items: flex-start;
}
header > div{
margin: 12px 0;
}
.header-center ul li{
margin: 0 15px 0 0;
}
}
@media (max-width: 600px){
body {
padding: 0 10px;
}
.header-left{
margin-top:0;
}
header {
padding: 30px;
}
.main-content{
padding:30px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="header-left"><span>Cool</span>Logo</div>
<div class="header-center">
<ul>
<li><a href="#">Продукция</a></li>
<li><a href="#">Цены</a></li>
<li><a href="#">Блог</a></li>
</ul>
</div>
<div class="header-right"><button>Купить</button></div>
</header>
<section class="main-content">
<h2>Шапка с тремя выравниваемыми частями</h2>
<p>Используя возможности Flexbox, логотип, ссылки и кнопка в нашей шапке остаются в обозначенных местах, независимо от размера экрана. Свойство <strong style="white-space: nowrap;">justify-content</strong> предлагает чистый подход и позволяет без проблем выровнять раздел шапки. Не нужны никакие float, margin или безумные расчёты ширины.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
<div class="placeholder"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
</section>
</div>
</body>
</html>
Полная адаптивность
Трюк со space-between всегда будет следить за выравниванием, даже когда меняется размер экрана. Однако когда область просмотра становится слишком маленькой для горизонтальной шапки, мы можем сделать её вертикальной, изменив свойство flex-direction в медиа-запросе.
@media (max-width: 1000px){
header{
/* Меняем оси шапки, делая её вертикальной. */
flex-direction: column;
/* Выравнивание элементов шапки с начала (по левому краю). */
align-items: flex-start;
}
}Выводы
Подведём итог нашего краткого руководства! Надеемся, что вы сочли его полезным и сразу начнёте его применять. В настоящее время Flexbox довольно хорошо поддерживается браузерами, так что если ваши пользователи не предпочитают IE, то эта техника может применяться без всякого вреда.
Чтобы узнать больше о Flexbox и об используемых нами свойствах CSS, ознакомьтесь со следующими ссылками: