Адаптивный интерфейс – это практика проектирования и разработки веб-сайтов или веб-приложений, которые правильно адаптируются и отображаются на различных устройствах и размерах экранов, таких как настольные компьютеры, ноутбуки, планшеты и смартфоны. Вот несколько методов, которые обычно используются для создания адаптивного интерфейса, а также примеры кода:

1. Медиа-запросы CSS.
   Медиа-запросы CSS позволяют применять различные стили в зависимости от характеристик устройства или размера экрана. Например, вы можете определить разные правила CSS для экранов, ширина которых превышает определенную ширину, и экранов меньше этой ширины.

/* CSS for screens larger than 768 pixels */
@media (min-width: 768px) {
  /* Styles for larger screens go here */
}
/* CSS for screens smaller than 768 pixels */
@media (max-width: 767px) {
  /* Styles for smaller screens go here */
}

2. Гибкие сетки.
   С помощью фреймворков CSS, таких как Bootstrap или Foundation, вы можете создавать плавные сетки, которые автоматически регулируют расположение и пропорции элементов в зависимости от размера экрана. Это позволяет контенту адаптироваться и перекомпоновываться в соответствии с доступным пространством.

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <!-- Content for the first column -->
    </div>
    <div class="col-sm-6">
      <!-- Content for the second column -->
    </div>
  </div>
</div>

3. Гибкие изображения.
   Чтобы сделать изображения адаптивными, вы можете использовать правила CSS, гарантирующие, что они масштабируются пропорционально и не выходят за пределы ширины контейнера. Обычно используется правило max-width: 100%.

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

4. Адаптивная типографика.
   Использование относительных единиц измерения, таких как emили rem, для размеров шрифтов гарантирует, что они масштабируются в соответствии с предпочтительным размером шрифта пользователя или размером экрана.

h1 {
  font-size: 2.5rem;
}
p {
  font-size: 1rem;
}

5. CSS Flexbox:
   CSS Flexbox — это модель макета, которая обеспечивает эффективный способ выравнивания и распределения элементов внутри контейнера. Это упрощает создание адаптивных макетов с гибким и динамическим позиционированием контента.

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 0 200px;
}