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

В прошлых трех частях мы сверстали десктопный вариант макета, а здесь приступим к адаптации под мобильные устройства. В этом видео рассматриваются подходы к этому процессу и различные концепции и тонкости, которые необходимы для продолжения работы. СОДЕРЖАНИЕ: 00:00 Вступление и описание проблем/задач 01:00 Разбор того, какого типа адаптация существует. Верстка этого лендинга в двух вариантах. 03:05 Как делают адапатцию сайтов? Mobile-first, Desktop-first и выбор между ними. [id705766|@media], max-width, min-width. Во что компилируется PostCSS-код? 07:20 “Баг“ со срабатыванием медиа-запроса на другой ширине, чем была задана. Общий подход к выявлению причин проблем при адаптации. 12:30 Суть [id705766|@media], max-width и min-width. Проблемы на граничных точках. Когда использовать min-width, а когда - max-width? 19:07 Про фиксированные и кастомные брейкпоинты. Пример Bootstrap. 21:01 Про пользу переменных в стилях. CSS-переменные и переменные PostCSS - в чем разница и плюсы-минусы? 24:58 Наст