Тестировщик | Вопросы собесов on Telegram: “🤔 Что такое респонсивная верстка? Респонсивная…”

🤔 Что такое респонсивная верстка?

Респонсивная верстка (Responsive Web Design, RWD) — это подход к разработке веб-страниц, при котором сайт автоматически подстраивается под разные размеры экранов и устройства (десктопы, планшеты, смартфоны).

🚩Как реализуется респонсивность?

🟠Медиа-запросы (CSS Media Queries)
Позволяют менять стили в зависимости от размера экрана.

body {
  font-size: 16px;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

🟠Гибкие сетки (Flexible Grids, Flexbox, CSS Grid)
Позволяют располагать элементы на странице так, чтобы они адаптировались под экран.

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px; /* Блоки с минимальной шириной 300px */
}

🟠Отзывчивые изображения (Responsive Images)
Изображения должны подстраиваться под размер экрана.

img {
  max-width: 100%;
  height: auto;
}

🟠Viewport в `<meta>`
Обязательный тег для адаптивности на мобильных устройствах.

<meta name="viewport" content="width=device-width, initial-scale=1">

Ставь 👍 и забирай 📚 Базу знаний