Адаптивная верстка в CSS. Desktop и mobile first. Медиазапросы @media. Свойства min / max размеров.

✏️ В этом уроке говорим про понятие адаптивной верстки, подходы dekstop и mobile first, про свойства min-max размеров и про директиву media.
🔴 Timeline:
▶ 00:00​ | План урока
▶ 00:18​ | Что такое адаптивная верстка
▶ 01:19​ | Подходы desktop-first и mobile-first
▶ 02:39​ | Свойства min-width и max-width
▶ 03:19​ | Свойство min-height
▶ 03:53​ | Свойство max-height
▶ 05:01​ | Медиазапросы, директива @media
▶ 07:45​ | Тег meta для медиазапросов
▶ 08:40​ | Медиазапросы, подход mobile-first
▶ 09:27​ | Медиазапросы min-height и max-height
▶ 09:33​ | Медиазапрос orientation
▶ 09:47​ | Медиазапрос print
▶ 10:05​ | Медиазапрос hover
▶ 11:18​ | Media на MDN
▶ 11:25​ | Резиновая верстка
▶ 11:55​ | Что дальше
📚 Полезные ссылки:
➖ Современный справочник по CSS: doka.guide/css/
➖ Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox: developer.mozilla.org/ru/
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css

[@ezoflin_home]

О, про залипание кнопки на тач устройствах очень полезно, спасибо! Раньше костыльными решениями исправляли, а оказыватется есть такая прекрасная штука

[@Ivanfwit]

полезно, неоднократно задумывался как обойти это "залипание" кнопки, но не добирался разобраться, спасибо!

[@CportS1la]

Отличное видео ! Все понятно! Спасибо за труд

[@svitboomer8840]

Опааа, опааа, че поймал. Щас Web с колен поднимем

[@vtech8716]

Спасибо АЛЕКСАНДР ! продолжаем смотреть.

[@akylbekbaizakov]

Спасибо за урок!

[@user-pk2mt5oo5v]

Спасибо большое за информацию

[@Clay286]

Классный контент! Спасибо!

[@gregdmitriev2784]

clamp ( ) хорошо решает вопросы адаптации

[@AleksanderLamkov]

Да, безусловно, но мне кажется, это «информация со звездочкой», не для новичков, поэтому рассказываю об этой функции в уроке вне текущего курса :)

[@Clay286]

Тогда ещё со звёздочкой можно добавить для гридов: grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))

[@morismustanger6095]

за inset спасибо!

[@AleksanderLamkov]

Про inset ещё в 10-м видео курса чуть подробнее говорил, если что :) kzbin.info/www/bejne/oIKmq6uDZ8mDjbc

[@colodatwin3102]

спасибо, топим дальше! а у hover: hover, хорошая поддержка?

[@AleksanderLamkov]

Да, это давнишняя фича, 95% поддержки, смело можно использовать.

[@user-km3pj7uv4t]

Коммент в поддержку

[@smotritelyoutube]

Лайк

[@unlimitedgames8357]

Огонб про hover не знал

[@colodatwin3102]

i'm too

[@WebSEOkz]

Вёрстка по технологии Mobile first увеличивает производительность для мобильных. Это очень важно для сайта!

[@AleksanderLamkov]

Верно. Но в любом случае нужно знать метрики, чтобы понимать, какого рода клиенты, мобилка или десктоп, у проекта в приоритете. Ну а вообще, по-хорошему, стилей в проекте должно быть как можно меньше, особенно в медиазапросах, чтобы нивелировать разницу в перформансе на разного рода устройствах, независимо от примененного подхода в адаптации. Зачастую проблемы совсем не в стилях и маловероятно что в подходе к верстке, а в раздутых бандлах джаваскрипта и бешеного размера загружаемых клиентом файлов медиаресурсов :)

[@user-fc9vq2ut6t]

а есть какие то стандарты при указании размеров экрана в медиа запросах или на глаз?

[@AleksanderLamkov]

Привет! За основу можно взять эти: getbootstrap.com/docs/5.0/layout/breakpoints/

[@user-fc9vq2ut6t]

спасибо)@@AleksanderLamkov

[@sao4227]

хотел спросить что удобнее, полностью с верстать декстопную версию а потом делать адаптив или сделать одну секцию и сделать адаптив под нее же сразу

[@AleksanderLamkov]

Привет! Определенно верстать секцию и сразу её адаптировать. Так ты будешь сразу в контексте и в случае чего, менее болезненно переделаешь косяки десктопа, если они будут мешать адаптации.