Как сделать адаптив в css

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

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

@media screen and (max-width: 768px) {
  /* стили для мобильных устройств */
}

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

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.block {
  width: 33.33%;
  height: 200px;
}
@media screen and (max-width: 768px) {
  .block {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  .block {
    width: 100%;
  }
}

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

.container {
  width: 80%;
  margin: 0 auto;
}

Обратите внимание, что вместо 80% ширины соответствующего контейнера можете использовать любое значение, которое будет адекватно работать на различных экранах.

Объединение указанных выше методов в одном проекте поможет сделать вашу страницу адаптивной и удобной для использования на различных устройствах.