Почему один и тот же сайт на телефоне и компьютере выглядит по-разному?

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

Что такое адаптивный дизайн?

Фронтенд-дизайнеры заранее прописывают правила: «если экран шире 1000 пикселей — показывай три колонки, если уже — одну». Браузер читает эти правила и подстраивает отображение под ваш экран автоматически.

Технически это делается через так называемые медиазапросы в CSS — специальном языке описания стилей. Выглядит это примерно так: «при ширине экрана меньше 600 пикселей — скрыть боковую панель».

Почему это важно именно сейчас?

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

Как проверить, адаптирован ли сайт?

Откройте сайт на компьютере и попробуйте сузить окно браузера, потянув за правый край. Если контент перестраивается — дизайн адаптивный. Если всё начинает «вылезать» за края — нет.

Три размера, под которые обычно делают дизайн

Устройство	Примерная ширина
Телефон	до 480 пикселей
Планшет	481–1024 пикселя
Компьютер	от 1025 пикселей

Каждый из этих вариантов дизайнер продумывает отдельно. Поэтому хорошая вёрстка — это всегда три макета в одном.