ПОДПИСКА на УРОКИ


Дополнительное видео

 МОБИЛЬНАЯ ВЕРСИЯ горизонтального меню | Адаптируем меню на чистом CSS

Media queries CSS как АДАПТИРОВАТЬ сайт


Хостинг от Макхост

Media queries CSS / Адаптации страниц


  • Денис Горелов
  • 01.08.2017
  • CSS и CSS3
  • Просмотров: 497

В данной статье пойдет речь про медиа-запросы (Media queries), при помощи которых мы адаптируем страницы Веб-дизайна. По данной теме на моем канале найдете несколько выпуском, где мы разбирали теорию Media queries CSS, и на практике показывал, как адаптировать горизонтальное меню.

See the Pen XzxNrR by Denis (@Dwstroy) on CodePen.

Кто первый раз слышит по Media queries, хочет разобраться, как адаптировать Веб-страницы, рекомендую посмотреть предыдущие выпуски, так как в данном видео теорию я опускаю и больше акцент сделаю на практике.

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

Сейчас она не адаптирована, при разных расширений элементы на странице не подстраиваются.

По окончанию урока получим такой результат.

Media queries CSS

Скачиваем архив к себе на компьютер, распаковываем, копируем все файлы в свою среду разработки. В свою очередь я все работы буду проводить в phpStorm по этому все копирую в него.

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

Задаем сразу правила для всех устройств, применим стили при расширении менее 900 пик.

<link rel="stylesheet" href="css/media.css" media="all and (max-width: 900px)">    

Для проверки, что файл у нас успешно подключен и работает стили его по данному условию, добавим дополнительный стиль который изменит цвет текста при расширении менее 900 пик.

body {
 color: red;
}    

Обновив страницу, возможно, вы не увидите разницу при изменении ее масштаба, причина тому, что нужно сбросить кешь и желательно добавить мета тег viewport который устанавливает ширину начального масштаба для окна просмотра на мобильных устройствах.

<meta name="viewport" content="width=device-width, initial-scale=1.0">    

Более подробно о нем я рассказывал в уроке по адаптации горизонтального меню, рекомендую его просмотреть, за одно увидите как он работает.

Для начала адаптируем под расширения в 900 пик. Так как мы уже прописали конструкцию медиа запроса в index файле тут достаточно описать стили.

В принципе дизайн корректно смотрится, можно было оставить и в таком виде, но при расширении когда доходит до 768 пик. идет сильно сжатие блоков новостей. Тут как вариант, оставляем два первых блока, а третий опускаем ниже и растягиваем на всю ширину.

Адаптируем блоки новостей

Отбираем новости и установим ширину больше на 17% что бы третий блок не влезал

div.one-news {
 width: 47.5%;
}    

Из за отступов которые заданы в 5% второй блок ушел в низ, чтобы его выровнять скидываем отступы.

div.one-news-second {
 margin: 0;
}    

Третий блок нам нужно растянуть на всю ширину.

Скидываем у него обтекание, указываем ширину в 100% и зададим верхние отступы.

div.one-news-last {
 clear: both;
 float: none;
 width: 100%;
 padding-top: 20px;
}    

Адаптация страницы менее 768 пик

Следующим этапом оптимизируем страницу от 768 пик 500 пик. Пишем медиа запрос, с его проверкой подключения.

@media all and (max-width: 768px) {

 body {
  color: red;
 }

}    

Следующий запрос до 500 пик, пишем ниже.

@media all and (max-width: 500px) {

 body {
  color: #3a9c1b;
 }

}   

Адаптируем горизонтальное меню

Как правило, начинаем с самого верха, и первым делом оптимизируем горизонтальное меню.

Кстати, если хотите отцентровать меню по середин, достаточно дописать UL justify-content: center; и меню расположится по середине.

Выравниваем меню по середине

если нужно его растянуть, добавляем к спискам следующий код:

Растягиваем меню

.menu li {
 flex-grow: 1;
 text-align: center;
}    

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

Для отлова клика добавим в верстку дополнительные селекторы input и label. Принцип работы я подробно рассказывал в одном из уроков «Адаптация горизонтального меню», кому интересно в этом разобраться переходите на канал, смотрите предыдущие выпуски.

Вставим иконку по нажатию, на которую будем разворачивать и сворачивать меню.

<input type="checkbox" id="dws-menu">
<div class="leb-menu">
   <label for="dws-menu"><img src="images/icono-menu.png"></label>
</div>   

Прописываем стили по наведению на иконку чтобы появлялся курсор и сделаем прозрачность цвета.

header label:hover{
 cursor: pointer;
 background: rgba(0,0,0,0.3);
}    

Проверяем, что по нажатию на иконку заполняется чекбокс.

Окей, все работает, идем дальше.

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

Скрываем чекбокс, он нам тут абсолютно не понадобится.

Скроет label, что бы иконка при начальном этапе не выводилась.

#dws-menu,
header label {
 display: none;
}    

Теперь в медиа запросе отобразим данный блок с иконкой при расширении менее 768 пик. При помощи display: block; мы его отображаем, указываем ширину и высоту иконки, сделаем отступы с верху и при помощи border-right делаем вертикальную черту.

header label {
 display: block;
 width: 30px;
 height: 30px;
 padding: 10px;
 border-right: 1px solid #fff;
}    

Оформляем иконку

Теперь пришло время сделать анимацию появления и исчезновения меню по щелчку иконки, для этого позиционируем блок абсолютно и списки при помощи flex-direction делаем вертикально.

.menu {
 position: absolute;
}
.menu ul {
 flex-direction: column;
}    

Для того что бы скрыть блок с меню, укажем классу .menu фиксированную ширину и убираем его за видимую часть экрана при помощи отрицательного отступа в лево.

.menu {
 position: absolute;
 width: 200px;
 margin-left: -200px;
}    

И по щелчку, отступы вернем в нулевое положение.

#dws-menu:checked ~ .menu {
 margin: 0;
}    

Для плавности появления задаем transition в пол секунды.

.menu {
 position: absolute;
 width: 200px;
 margin-left: -200px;
 transition: all 0.5s;
}    

В принципе что тут осталось, сделаем у списков верхнее подчеркивание и при помощи отступов выравниваем списки.

.menu li {
 border-top: 1px solid #fff;
}   

Уменьшим текст в меню до 14 писк.

.menu li a {
   font-size: 14px;
  padding: 15px 10px;
}   

Уберем внутренние отступы

.section-inner.indents {
 padding: 0;
}    

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

div.banner {
 height: 200px;
}
h2.text-banner {
 left: 15%;
 font-size: 1.5em;
}    

С расширением в 768 пик разобрались и теперь оформим стили при расширении менее 500 пик.

Адаптация под расширение менее 500 пик.

Свернем экран до таких размеров, и тут в принципе баннер нам не нужен, новостную ленту перевести в один столбец, можно оставить важный блок, а остальные скрыть.

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

<div class="one-news mobile">
<div class="one-news one-news-second mobile">
<div class="one-news one-news-last mobile">
<div class="main mobile">
<div class="right-side mobile">  
  
 div.mobile {
 width: auto;
 float: none;
 margin-right: 0;
}   

Затем добавим класс для блоков, которые хотим скрыть.

<div class="banner hide-mobile">
<div class="box-2 hide-mobile">
<div class="box-3 hide-mobile">    

.hide-mobile {
 display: none;
}    

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

Оставить комментарий:

Отзывы

Отзывов нет.

Написать отзыв

* - Обязательные поля

Выбирай свою тему, и мы напишем когда выйдет по ней очередное видео.