Адаптивная и отзывчивая вёрстка

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

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

Адаптивная вёрстка — та вёрстка, где для каждого из типов устройств существует собственный макет. В основном, используются фиксированные размеры элементов, а переходы между «устройствами» при изменении размеров окна браузер выглядят рвано, поскольку происходят скачками от запроса к запросу.

Создаются опорные точки при помощи запросов в CSS, выглядит это примерно так:

.block {
 display: grid;
}

@media (max-width: 768px) {
  /* стили для экранов шириной до 768px */
 .block {
  grid-template-columns: 1fr;
 }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* для ширины экрана от 768px до 1024px */
 .block {
  grid-template-columns: repeat(1, 3fr);
 }
}

@media (min-width: 1024px) {
  /* для ширины экрана более 1024px */
 .block {
  grid-template-columns: repeat(1, 6fr);
 }
}

При отзывчивой вёрстке существует лишь один макет, например, только для мобильных устройств или только для компьютеров, а всё остальное строится отзывчиво относительно изначального макета. Есть даже специальные названия для подходов к разработке, например, Mobile First Design или же Desktop First Design. Особенность такой вёрстки заключается в полной адаптивности под любые устройства и плавность переходов между ними, хотя целевой платформой является что-то одно — либо смартфон, либо компьютер.

Что лучше? Точно ответить нельзя. Субъективно, отзывчивая вёрстка выглядит куда более приятно, но она дороже и дольше в разработке. Всё зависит от конкретных требований проекта и задачи, которую вы собираетесь решать. Иногда поставленные задачи лучше выполнит отдельная мобильная версия. Или вообще приложение вместо сайта.

Спасибо за прочтение, это важно для меня ❤️

#web #theory #mobile #design #useful