Адаптивная верстка сайтов. Общая теория и примеры
ฝัง
- เผยแพร่เมื่อ 28 มิ.ย. 2024
- Привет!
Этим видео я открываю мини-цикл по адаптивной верстке сайта. В нем мы рассмотрим, как верстать сайты адаптивно, а в этом видео важно разобраться с очень важными фундаментальными понятиями. Поэтому сегодня - про фиксированную, резиновую, адаптивную верстку, медиа-запросы, бутстрап, принципы адаптивности.
В следующих видео будет про адаптивные изображения, адаптивное меню, верстка сайта на 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
#обучение #адаптивнаяверстка #бутстрап
Спасибо за видео. Как раз хотела узнать о различии в верстках. С нетерпением жду следующих видео, так как полезно 👍
Спасибо за ёмкость и полезность!)
супер Спасибо Макс
Как всегда суперпознавательно, спасибо Вам Максим, с удовольствием смотрю Ваши видео.
Спасибо)
@@maxgraph , вы ещё преподаете в skill box?
Хорошее видео! Максим, отлично рассказывает, а самое главное с примерами и доступно! Максим, может Вы сделаете марафон или вебинар по mobile-first верстке?
Думал об этом, может быть)
Вот если бы у изображений был разный размер, а я например хочу чтоб у всех высота и ширина була одинаковой (высота больше), а изображения подстраивались по центру (cover), и чтобы при сужении экрана они сужались до брекйпоинта где они перестраиваются. Я бы посмотрел и лайк поставил
Подскажите, почему в инструментах разработчика на компьютере при имитации просмотра сайта с iphone x, ширина у него показывается как 375px? На остальных телефонах тоже, хотя на самом деле у этих телефонов высокое разрешение и по ширине там сильно больше пикселей, чем 375?
Ну это же просто пиксели, разрешение. А ширина именно 375
Как успехи у mobile-first?
в плане?)
@@maxgraph в плане изменились ли тенденции за два года, и насколько mobile-first пользуется популярностью у разработчиков.
Что значит - если нет денег на адаптив?
На сегодняшний день адаптив - это обязательная составляющая верстки любого сайта. Это даже не обсуждается. Она по определению должна быть в финальном варианте. А как доп.опция за деньги - это просто попытка нагреть денег. Тоже самое, что хедер или футер за отдельные деньги предлагать.
Увы, обсуждается. Не с потолка выдумал, бывал в таких ситуациях.
То есть ,98 нужно везде писать?
Не понял, о чем речь?)
@@maxgraph 767,98рх и тд, в видео же говорится об этом, типа 0,2рх не надо прописывать
А, в идеале да, но не критично . Ну это на сайте бутстрапа посмотреть можете