Резиновая верстка css как сделать

Чтобы создать резиновую верстку в CSS, следует использовать относительные единицы измерения, такие как % и em. Когда элементы задаются в относительных единицах, то они меняют размер, когда изменяется размер окна браузера или размер устройства.

Пример CSS кода для создания резиновой верстки:

.container {
  width: 90%; /* задаем ширину контейнера в процентах */
  max-width: 1200px; /* устанавливаем максимальную ширину контейнера */
  margin: 0 auto; /* выравниваем по центру */
}

.column {
  width: 100%; /* задаем ширину колонки в процентах */
  float: left; /* устанавливаем элементы в ряд */
  padding: 20px; /* добавляем отступы для удобочитаемости */
}

@media only screen and (min-width: 768px) {
  .column {
    width: 50%; /* уменьшаем ширину колонки до 50% на широком экране */ 
  }
}

В этом примере мы создаем контейнер (container) и задаем ему ширину в 90% от ширины окна браузера. Мы также устанавливаем максимальную ширину контейнера в 1200px, чтобы ограничить его размер на больших устройствах.

Затем мы создаем колонки (column) и устанавливаем им ширину в 100%. Мы добавляем отступы для удобочитаемости.

Далее мы используем медиа-запрос (@media) для изменения ширины колонок при изменении размера окна браузера. В этом примере мы устанавливаем ширину колонок на широком экране в 50%, чтобы сделать страницу более удобоваримой.

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