Физическое разрешение экранов телефонов может превосходить разрешение десктопов. Например, Самсунги S-серии имеют разрешение 2560х1440, а некоторые ноутбуки 1366х768. Тем не менее, поведение адаптированных сайтов логичное: на телефоне отображается мобильная версия, на ноутбуке – десктопная. Это как-то связано с размером экрана, но как именно? Если взять два смартфона с одинаковым размером экрана, но разным разрешением в пикселях, то один и тот же сайт будет выглядеть на них одинаково (ну почти одинаково). Как будто разрешение в пикселях вообще не учитывается при определении устройства. Но брейкпоинты в медиа запросах основаны именно на количестве пикселей. Как так получается? Как сайты учитывают несколько параметров: размер, разрешение, ориентацию? Объясните, пожалуйста, подробнее этот механизм.
Вы совершенно правильно заметили: сколько бы пикселей не было у экрана, его «размеры» как будто определяются чем-то другим. Это «что-то» называется вьюпорт (или область просмотра) и там начинают работать виртуальные пиксели, которые дальше рисуются физическими. Каждое устройство устанавливает свой вьюпорт: на небольших телефонах он всегда был 320 пикселей, на экранах побольше — больше, см. таблицу. Подробнее об этом мы поговорим в 6 разделе на лекции про адаптивную графику.
Хотел бы уточнить, сильно ли отличается вёрстка адаптивной сетки от обычной вёрстки на флексбоксах или же тоже самое, а меняются такие вещи как направление флекс-элементов в зависимости от ширины окна? И ещё, применяется ли в современной адаптивной вёрстке - табличная вёрстка, т.к она резинится?
Адаптивная вёрстка — это обычная вёрстка на всех тех же самых технологиях, что и фиксированная. Только к ней добавляются медиавыражения (media queries) и множество других техник и подходов. Мы буем погружаться во все эти нюансы с 4 по 7 разделы. Табличная вёрстка — расплывчатое понятие. Если вы про вёрстку табличных данных, то HTML-таблицы непросто, но всё же адаптируются для мобильных. Если про вёрстку табличными CSS-свойствами, то большой пользы в них нет, флексов хватает.
На 54 минуте Николай говорит, что мы знакомы с медиа-запросами - напомните, пожалуйста, где это было?