Skip to content

Instantly share code, notes, and snippets.

@nikolai-shabalin
Last active April 8, 2020 18:52
Show Gist options
  • Save nikolai-shabalin/e6e4319e9fe7b12fb420f7e72cd4318c to your computer and use it in GitHub Desktop.
Save nikolai-shabalin/e6e4319e9fe7b12fb420f7e72cd4318c to your computer and use it in GitHub Desktop.
Вопросы к разделу «Адаптивные сетки» на 19 потоке

Вопросы к разделу «Адаптивные сетки»

Размеры экрана и адаптивность

Физическое разрешение экранов телефонов может превосходить разрешение десктопов. Например, Самсунги S-серии имеют разрешение 2560х1440, а некоторые ноутбуки 1366х768. Тем не менее, поведение адаптированных сайтов логичное: на телефоне отображается мобильная версия, на ноутбуке – десктопная. Это как-то связано с размером экрана, но как именно? Если взять два смартфона с одинаковым размером экрана, но разным разрешением в пикселях, то один и тот же сайт будет выглядеть на них одинаково (ну почти одинаково). Как будто разрешение в пикселях вообще не учитывается при определении устройства. Но брейкпоинты в медиа запросах основаны именно на количестве пикселей. Как так получается? Как сайты учитывают несколько параметров: размер, разрешение, ориентацию? Объясните, пожалуйста, подробнее этот механизм.

Вы совершенно правильно заметили: сколько бы пикселей не было у экрана, его «размеры» как будто определяются чем-то другим. Это «что-то» называется вьюпорт (или область просмотра) и там начинают работать виртуальные пиксели, которые дальше рисуются физическими. Каждое устройство устанавливает свой вьюпорт: на небольших телефонах он всегда был 320 пикселей, на экранах побольше — больше, см. таблицу. Подробнее об этом мы поговорим в 6 разделе на лекции про адаптивную графику.

Адаптивная вёрстка и флексы

Хотел бы уточнить, сильно ли отличается вёрстка адаптивной сетки от обычной вёрстки на флексбоксах или же тоже самое, а меняются такие вещи как направление флекс-элементов в зависимости от ширины окна? И ещё, применяется ли в современной адаптивной вёрстке - табличная вёрстка, т.к она резинится?

Адаптивная вёрстка — это обычная вёрстка на всех тех же самых технологиях, что и фиксированная. Только к ней добавляются медиавыражения (media queries) и множество других техник и подходов. Мы буем погружаться во все эти нюансы с 4 по 7 разделы. Табличная вёрстка — расплывчатое понятие. Если вы про вёрстку табличных данных, то HTML-таблицы непросто, но всё же адаптируются для мобильных. Если про вёрстку табличными CSS-свойствами, то большой пользы в них нет, флексов хватает.

@K-Katerina
Copy link

На 54 минуте Николай говорит, что мы знакомы с медиа-запросами - напомните, пожалуйста, где это было?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment