Задать вопрос
Mecitan
@Mecitan
Уверенный пользователь клавиатуры

Как правильно указывать медиа запросы с использованием Less?

Приветствую! Решил попробовать иной подход при вёрстке с использованием Less, дабы избавиться от полотна кода. И возник вопрос, где и как лучше использовать медиа-запросы? Ранее на этом портале видел в комментариях, что многие используют такой подход:

602297076041a320453982.png

Мне он понравился. Но осталось несколько вопросов.

Получается для каждого класса надо будет прописывать все брейк поинты? Если у меня их будет 7-10 штук(брейкпоинтов)? Получится тоже полотно кода, только в каждом файле для отдельного блока. Шило на мыло или я что-то не так понимаю в таком подходе? Как лучше организовать медиа запросы? Помогите разобраться в этом вопросе.
  • Вопрос задан
  • 130 просмотров
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro
frontend developer
Объявим миксин

.media(@screen, @rules) {

  & when (@screen = md) {
    @media (min-width: 768px) {
      @rules();
    }
  }

  & when (@screen = lg) {
    @media (min-width: 1024px) {
      @rules();
    }
  }
}


Будем использовать

.hero {
  max-width: 540px;
  
  .media(md, {
    max-width: 960px;
  });
  
  .media(lg, {
    max-width: 1180px;
  });
}
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы