Технология верстки 2020: подход к адаптации и подводные камни (часть 4)

У вашего броузера проблема в совместимости с HTML5

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

СОДЕРЖАНИЕ:
00:00 Вступление и описание проблем/задач
01:00 Разбор того, какого типа адаптация существует. Верстка этого лендинга в двух вариантах.
03:05 Как делают адапатцию сайтов? Mobile-first, Desktop-first и выбор между ними. @media, max-width, min-width. Во что компилируется PostCSS-код?
07:20 “Баг” со срабатыванием медиа-запроса на другой ширине, чем была задана. Общий подход к выявлению причин проблем при адаптации.
12:30 Суть @media, max-width и min-width. Проблемы на граничных точках. Когда использовать min-width, а когда - max-width?
19:07 Про фиксированные и кастомные брейкпоинты. Пример Bootstrap.
21:01 Про пользу переменных в стилях. CSS-переменные и переменные PostCSS - в чем разница и плюсы-минусы?
24:58 Настраиваем плагин postcss-simple-vars для PostCSS в конфиге Webpack. Решаем возникающие по пути проблемы.
29:07 Проверяем, что мы теперь можем создавать переменные в PostCSS. Добавляем удобство при одновременном использовании min-width и max-width в нашей верстке.
33:01 Создаем ветку для адаптивной (adaptive) и отзывчивой (responsive) версий. Используем min- и max-width одновременно. Инструмент для визуализации и быстрого переключения брейкпоинтов в DevTools браузера Chrome.
35:06 Напутствие новичкам по поводу сложности настройки Webpack
36:17 Подчищаем проект и делаем коммит. Заключение.

Исходники к ролику (PSD-файл с дизайном находится там же):
https://github.com/makewebme/website-tech2020-simple-landing

Основы Flexbox: https://youtu.be/H6O90IIqrtA
Курс по Git: https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6

????????????
Стань спонсором канала и получи бонусы: https://www.youtube.com/channel/UCt36CWL85NGtOgUMZ2X6x5g/join

????????????
Avocode - лучше обезболивающее для того, кому приходится верстать из PSD, AI, XD, Sketch и Figma. Регистрируйся и получи скидку 10% на первую покупку, введя в соответствующем поле промо-код ‘nikita’: https://avocode.com/pricing

Обучающие ролики по Avocode: http://makeweb.me/avocode-lessons-yt-desc

✊✊✊
Персональные уроки по веб-разработке: http://makeweb.me/lessons-video
Отзывы: http://makeweb.me/lessons-feedback
Связаться: https://vk.com/write-96139053 / [email protected]

✍✍✍
Присоединяйся к нашему Telegram-чату тут http://makeweb.me/telegram-mw-1 или, если не работает, тут http://makeweb.me/telegram-mw-2
Или по имени чата в поиске - @makewebme