Media queries (Адаптация страниц) / Responsive Web Design Tutorial

Создавая уникальные страницы с #HTML и #CSS, приходится задумываться об #адаптации их под разные #разрешения #экранов. Есть множество способов сделать #Responsive #Web #Design, я на практике покажу вариант адаптации при помощи #медиа_запросов (#media #queries).
Responsive design with media queries помогает подстроить элементы странички под разные разрешения экранов, а как это сделать смотрите в данном уроке.
Ссылка на верстку - http://bit.ly/2v69KPZ
Архив с адаптивным кодом - http://bit.ly/2utIDuH

Из видео урока по Media queries (Адаптация страниц) вы узнаете:
• Как адаптировать горизонтальное меню;
• Каким образом сделать меню по центру и растянуть его по ширине блока;
• Каким адаптировать элементы страницы под разные разрешения;
• Как скрыть не нужные блоки при маленьких разрешения.

Ссылки на предыдущие выпуски:
Media queries CSS (теория) -    • Media queries CSS. АДАПТАЦИЯ под моби...  
Адаптивное меню на чистом CSS -    • #2 ЧАСТЬ - Выпадающее МЕНЮ на чистом ...  

Обсуждение видео:    • Media queries (Адаптация страниц) / R...  
Подписка на канал: http://bit.ly/2oR3EfT
Видео сборник: https://dwstroy.ru/~S126H
FAQ - Ответы на Ваши вопросы: http://bit.ly/2rHZvR1

*Видео метки*:
[01:43] - Переносим верстку
[02:25] - подключаем media файл
[02:50] - устанавливаем цвет при разрешения в 900 пик.
[03:49] - мета тег #viewport
[04:49] - медиа-запрос на 768 пик.
[05:21] - адаптируем блоки новостей
[09:32] - адаптируем горизонтальное меню
[10:07] - центруем горизонтальное меню
[10:36] - растягиваем горизонтальное меню
[11:30] - добавляем иконку в меню
[15:06] - выстраиваем меню вертикально
[16:17] - описываем шелчок по иконки в меню
[18:55] - скрываем блоки на маленьких разрешения
[19:50] - медиа запрос на 500 пик.

*Другие видео на канале DWSTV*:
JavaScript Основы - http://bit.ly/2udeTq3
Сайт с нуля - https://dwstroy.ru/~7KNnM
Уроки по #CSS - https://dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q
Управление системой Битрикс - https://dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ

Добавляйтесь к нам в друзья:
Сайт видео-уроков: https://dwstroy.ru/video/
Страничка в VK автора уроков: https://vk.com/dwstv
Канал группы в VK: https://dwstroy.ru/~MJM28

Мы очень рады если видео по "Responsive Web Design" Вам понравилось, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и #видео-уроки как по #CSS, так и другим #WEB разработкам.