Тёмный

Адаптивная верстка сайтов. Общая теория и примеры 

MaxGraph - cайты как страсть
Подписаться 30 тыс.
Просмотров 9 тыс.
50% 1

Привет!
Этим видео я открываю мини-цикл по адаптивной верстке сайта. В нем мы рассмотрим, как верстать сайты адаптивно, а в этом видео важно разобраться с очень важными фундаментальными понятиями. Поэтому сегодня - про фиксированную, резиновую, адаптивную верстку, медиа-запросы, бутстрап, принципы адаптивности.
В следующих видео будет про адаптивные изображения, адаптивное меню, верстка сайта на vw, а так же просто практика адаптивной верстки.
Содержание:
00:00 - Вступление
00:26 - Для чего нам адаптивная верстка?
02:42 - Фиксированная верстка
04:50 - Резиновая верстка
06:40 - Адаптивная верстка
08:10 - Медиа-запросы
14:22 - Какие именно запросы использовать?
21:05 - Про бутстрап, нужен ли?
25:34 - Пара слов о mobile-first
27:42 - Принципы и фишки при адаптиве
33:40 - Заключение
• Верстка сайта с нуля д... - марафон верстки
• Лучший слайдер для сай... - слайдер на мобильных устройствах
• Как натянуть верстку н... - про то, какие проблемы бывают с натяжкой на WordPress
clck.ru/PbZCJ - исходники видео на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #адаптивнаяверстка #бутстрап

Опубликовано:

 

19 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 22   
@averkovatatyana
@averkovatatyana 3 года назад
Спасибо за видео. Как раз хотела узнать о различии в верстках. С нетерпением жду следующих видео, так как полезно 👍
@RomanKhassazhirov
@RomanKhassazhirov Год назад
Спасибо за ёмкость и полезность!)
@user-pm4hx1bd4n
@user-pm4hx1bd4n Год назад
Как всегда суперпознавательно, спасибо Вам Максим, с удовольствием смотрю Ваши видео.
@maxgraph
@maxgraph Год назад
Спасибо)
@user-pm4hx1bd4n
@user-pm4hx1bd4n Год назад
@@maxgraph , вы ещё преподаете в skill box?
@Expertdog
@Expertdog 2 года назад
Хорошее видео! Максим, отлично рассказывает, а самое главное с примерами и доступно! Максим, может Вы сделаете марафон или вебинар по mobile-first верстке?
@maxgraph
@maxgraph 2 года назад
Думал об этом, может быть)
@alexandrgusletsov2567
@alexandrgusletsov2567 3 года назад
супер Спасибо Макс
@user-fb3wj9ge2t
@user-fb3wj9ge2t Год назад
Вот если бы у изображений был разный размер, а я например хочу чтоб у всех высота и ширина була одинаковой (высота больше), а изображения подстраивались по центру (cover), и чтобы при сужении экрана они сужались до брекйпоинта где они перестраиваются. Я бы посмотрел и лайк поставил
@FunGameOfficial
@FunGameOfficial 3 года назад
Подскажите, почему в инструментах разработчика на компьютере при имитации просмотра сайта с iphone x, ширина у него показывается как 375px? На остальных телефонах тоже, хотя на самом деле у этих телефонов высокое разрешение и по ширине там сильно больше пикселей, чем 375?
@maxgraph
@maxgraph 3 года назад
Ну это же просто пиксели, разрешение. А ширина именно 375
@dinkerk
@dinkerk Год назад
Как успехи у mobile-first?
@maxgraph
@maxgraph Год назад
в плане?)
@dinkerk
@dinkerk Год назад
@@maxgraph в плане изменились ли тенденции за два года, и насколько mobile-first пользуется популярностью у разработчиков.
@vipdeveloper
@vipdeveloper 3 года назад
То есть ,98 нужно везде писать?
@maxgraph
@maxgraph 3 года назад
Не понял, о чем речь?)
@vipdeveloper
@vipdeveloper 3 года назад
@@maxgraph 767,98рх и тд, в видео же говорится об этом, типа 0,2рх не надо прописывать
@maxgraph
@maxgraph 3 года назад
А, в идеале да, но не критично . Ну это на сайте бутстрапа посмотреть можете
@denpro9712
@denpro9712 3 года назад
Что значит - если нет денег на адаптив? На сегодняшний день адаптив - это обязательная составляющая верстки любого сайта. Это даже не обсуждается. Она по определению должна быть в финальном варианте. А как доп.опция за деньги - это просто попытка нагреть денег. Тоже самое, что хедер или футер за отдельные деньги предлагать.
@maxgraph
@maxgraph 3 года назад
Увы, обсуждается. Не с потолка выдумал, бывал в таких ситуациях.
Далее
Тёмная сторона Кореи @sorrykatana
00:54
Chips evolution !! 😔😔
00:23
Просмотров 14 млн