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

Привет!

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

В следующих видео будет про адаптивные изображения, адаптивное меню, верстка сайта на 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 - Заключение

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

#обучение #адаптивнаяверстка #бутстрап

[averkovatatyana]

Спасибо за видео. Как раз хотела узнать о различии в верстках. С нетерпением жду следующих видео, так как полезно 👍

[андреймаслов-ей]

Как всегда суперпознавательно, спасибо Вам Максим, с удовольствием смотрю Ваши видео.

[Expertdog]

Хорошее видео! Максим, отлично рассказывает, а самое главное с примерами и доступно! Максим, может Вы сделаете марафон или вебинар по mobile-first верстке?

[ОлегРоманович-жв]

Вот если бы у изображений был разный размер, а я например хочу чтоб у всех высота и ширина була одинаковой (высота больше), а изображения подстраивались по центру (cover), и чтобы при сужении экрана они сужались до брекйпоинта где они перестраиваются. Я бы посмотрел и лайк поставил

[FunGameOfficial]

Подскажите, почему в инструментах разработчика на компьютере при имитации просмотра сайта с iphone x, ширина у него показывается как 375px? На остальных телефонах тоже, хотя на самом деле у этих телефонов высокое разрешение и по ширине там сильно больше пикселей, чем 375?

[denpro]

Что значит - если нет денег на адаптив?
На сегодняшний день адаптив - это обязательная составляющая верстки любого сайта. Это даже не обсуждается. Она по определению должна быть в финальном варианте. А как доп.опция за деньги - это просто попытка нагреть денег. Тоже самое, что хедер или футер за отдельные деньги предлагать.

[scriptoleshko]

К сожалению не понятно. С чего начинать адаптив, с чего начинать резиновую верстку? Нет пошагового... Видео-изложение инфо по типу "википедии"