В первой и второй части урока, мы заново создали шапку сайта, но этого не достаточно. При уменьшении ширины экрана до 1000 пикселей, элементы сайта начинают наезжать друг на друга.
В первой и второй части урока, мы заново создали шапку сайта, но этого не достаточно. При уменьшении ширины экрана до 1000 пикселей, элементы сайта начинают наезжать друг на друга.
Поэтому, нам нужно изменить некоторые стили, чтобы сайт не ломался, на любой ширине между 1000 и 320 пикселями. В первую очередь мы меняем у flexbox-ов рядное расположение блоков на колоночное, все блоки-дети должны встать друг под другом. Для всех flex-контейнеров задаем свойство.
flex-direction: column;
Все переопределенные селекторы записываем в медиа-запросе.
Медиа запросы
/* На ширине меньше 1000px меняем стили для адаптивности */
@media screen and (max-width: 1000px) {
.top-header {
flex-direction: column;
}
p {
margin: 0 5px; /* уменьшение отступов у инфоблоков */
}
header {
flex-direction: column;
}
nav {
flex-flow: column-reverse; /* меняем порядок колонок */
align-items: flex-end; /* сдвигаем элементы по вертикали вниз */
}
nav .menu {
flex-direction: column;
align-items: flex-start; /* сдвигаем элементы по вертикали вверх */
position: relative; /* относительное позиционирование */
}
/* позиционирование ссылок меню */
.move-links {
position: absolute;
left: 102px;
top: -38px;
}
}
Теперь шапка сайта, адаптируется под разные разрешения экранов.
Перейдя по ссылке, вы можете посмотреть, как работает адаптация, уменьшая размеры окна браузера.
