Без медиа-запросов: переход от гибкого макета с рабочего стола с 3 колонок на 1 колонку для мобильного

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

Рассмотрим веб-сайт с трехколоночным макетом на настольных компьютерах:

   |  |  |
---| ---| ---|
| 1 | 2 | 3 |

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

|
---|
| 1 |
| 2 |
| 3 |

Для динамического достижения этой цели на помощь приходят мощные функции CSS:

Grid and Clamp

.grid-wrapper {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

Функция повторения() создает указанное количество столбцов, а функция зажима() обеспечивает минимум 1 столбец, когда область просмотра сжимается ниже 500 пикселей.

Flexbox и Negative Margin

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

Этот подход гарантирует, что элементы располагаются рядом на больших экранах, но располагаются вертикально на узких. Отрицательное поле изначально создает перекрытие, которое исправляется путем его удаления на маленьких экранах.

Вывод

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