Введение в верстку для различных экранов в CSS

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

Как правило устройства выделяют в четыре класса: компьютеры (desktop), ноутбуки, планшеты (tablet) и телефоны (mobile).

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

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

Это достигается перестроением блоков в ключевых точках макета. При этом эти ключевые точки выбираются не под определенные устройства, а под контент сайта - так, чтобы он смотрелся хорошо.

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

Описанная верстка называется адаптивной или отзывчивой (responsive). Ее изучением мы и займемся в следующих уроках.