Как сделать блок адаптивным css

Чтобы сделать блок адаптивным в CSS, нужно использовать медиа-запросы и относительные единицы измерения, такие как проценты.

Например, чтобы сделать блок шириной 50% от ширины экрана на устройствах с шириной меньше 600 пикселей, можно использовать следующий CSS код:

.block {
  width: 50%; /* ширина блока */
}

@media (max-width: 600px) {
  .block {
    width: 100%; /* ширина блока на устройствах с шириной меньше 600px */
  }
}

Здесь мы задали ширину блока в 50% от ширины экрана. Затем мы использовали медиа-запросы, чтобы изменить ширину блока на устройствах с меньшей шириной экрана. Внутри медиа-запроса мы переопределили ширину блока на 100% от ширины экрана.

Также можно использовать другие относительные единицы измерения, такие как em, rem и vw (вьюпорт-ширина), чтобы создавать адаптивные блоки. Например, чтобы задать высоту блока в 50% от высоты экрана, можно использовать такой код:

.block {
  height: 50vh; /* высота блока 50% от высоты экрана */
}

Здесь мы использовали единицу измерения vh (вьюпорт-высота), которая указывает высоту экрана в процентах. Таким образом, высота блока будет изменяться автоматически, если измениться высота экрана устройства.

Используя медиа-запросы и относительные единицы измерения, можно легко создавать адаптивные блоки в CSS.