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 разработкам.
Создавая уникальные страницы с #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 разработкам.