Website marketing using high authority backlinks from popular website's, find out more at webcentreplus.com or email colin@webcentreplus.com
Click Here!

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 (теория) – https://youtu.be/x843xbMXkfc
Адаптивное меню на чистом CSS – https://youtu.be/tRoszGUp5Sg

Обсуждение видео: https://youtu.be/gM_liA4H9lI
Подписка на канал: 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 разработкам.

source – For all your website needs, visit out Spalding Web Design

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

Leave a Reply

Archives