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

  Рет қаралды 9,503

MaxGraph - cайты как страсть

MaxGraph - cайты как страсть

Күн бұрын

Привет!
Этим видео я открываю мини-цикл по адаптивной верстке сайта. В нем мы рассмотрим, как верстать сайты адаптивно, а в этом видео важно разобраться с очень важными фундаментальными понятиями. Поэтому сегодня - про фиксированную, резиновую, адаптивную верстку, медиа-запросы, бутстрап, принципы адаптивности.
В следующих видео будет про адаптивные изображения, адаптивное меню, верстка сайта на 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
#обучение #адаптивнаяверстка #бутстрап

Пікірлер: 22
@RomanKhassazhirov
@RomanKhassazhirov Жыл бұрын
Спасибо за ёмкость и полезность!)
@user-pm4hx1bd4n
@user-pm4hx1bd4n Жыл бұрын
Как всегда суперпознавательно, спасибо Вам Максим, с удовольствием смотрю Ваши видео.
@maxgraph
@maxgraph Жыл бұрын
Спасибо)
@user-pm4hx1bd4n
@user-pm4hx1bd4n Жыл бұрын
@@maxgraph , вы ещё преподаете в skill box?
@averkovatatyana
@averkovatatyana 3 жыл бұрын
Спасибо за видео. Как раз хотела узнать о различии в верстках. С нетерпением жду следующих видео, так как полезно 👍
@alexandrgusletsov2567
@alexandrgusletsov2567 3 жыл бұрын
супер Спасибо Макс
@Expertdog
@Expertdog 2 жыл бұрын
Хорошее видео! Максим, отлично рассказывает, а самое главное с примерами и доступно! Максим, может Вы сделаете марафон или вебинар по mobile-first верстке?
@maxgraph
@maxgraph 2 жыл бұрын
Думал об этом, может быть)
@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 пользуется популярностью у разработчиков.
@denpro9712
@denpro9712 3 жыл бұрын
Что значит - если нет денег на адаптив? На сегодняшний день адаптив - это обязательная составляющая верстки любого сайта. Это даже не обсуждается. Она по определению должна быть в финальном варианте. А как доп.опция за деньги - это просто попытка нагреть денег. Тоже самое, что хедер или футер за отдельные деньги предлагать.
@maxgraph
@maxgraph 3 жыл бұрын
Увы, обсуждается. Не с потолка выдумал, бывал в таких ситуациях.
@vipdeveloper
@vipdeveloper 3 жыл бұрын
То есть ,98 нужно везде писать?
@maxgraph
@maxgraph 3 жыл бұрын
Не понял, о чем речь?)
@vipdeveloper
@vipdeveloper 3 жыл бұрын
@@maxgraph 767,98рх и тд, в видео же говорится об этом, типа 0,2рх не надо прописывать
@maxgraph
@maxgraph 3 жыл бұрын
А, в идеале да, но не критично . Ну это на сайте бутстрапа посмотреть можете
37 ошибок верстальщиков. Не делай так!
44:50
MaxGraph - cайты как страсть
Рет қаралды 55 М.
Делаем адаптивное меню для сайта
47:26
MaxGraph - cайты как страсть
Рет қаралды 11 М.
Pray For Palestine 😢🇵🇸|
00:23
Ak Ultra
Рет қаралды 28 МЛН
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Рет қаралды 1 МЛН
Адаптивная верстка сайта на HTML CSS
2:00:35
ВебКадеми | Юрий Ключевский
Рет қаралды 110 М.
Методология БЭМ. Теория + пример
15:16
MaxGraph - cайты как страсть
Рет қаралды 32 М.
Семантика, семантическая верстка
1:38:06
От 0 до 1
Рет қаралды 48 М.