@Miron4ek_228

Изменение значения gap в зависимости от ширины экрана (адаптив) через миксины?

На одном из марафонов по вёрстке заметил такую деталь. Этот миксин динамически меняет значение gap в зависимости от ширины экрана: например если больше 1170 - 60px, а при самой маленькой ширине (например 320) gap 20px.

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

6283d05bc1f64084272539.png
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
SeaInside
@SeaInside
10 лет пилю все эти штуки
Здесь используются медиа-запросы, просто реализация скрыта за миксином.
Вы всегда можете посмотреть в результирующем CSS, во что этот миксин разворачивается.

Сам миксин почти наверняка выглядит как-то так и разворачивается примерно вот в такое:

@media (min-width: 320px) {
  gap: calc(20px + 40 * (100vw - 320px) / 850);
}

@media (min-width: 1170px) {
  gap: 60px;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы