Подтвердить что ты не робот

Css, изменить значение переменной с помощью @media

В настоящее время я участвую в проекте сайта, который реагирует, и меньше всего помогает много.

Но я хочу изменить переменную размера в зависимости от размера окна. Я пробовал следующий код, но он не работает. Возможно ли это, или я должен попробовать другое aproach?

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  @menu-width: 100px // smaller size
}

.menu {
  width: @menu-width;
}
4b9b3361

ОТВЕТЫ

Ответ 1

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

Помните @media - это запрос CSS, а не LESS-запрос

Запрос @media - это функция CSS, которая позволяет загружаемому в данный момент CSS отвечать на носитель, на котором он отображается (обычно это тип браузера, но может быть печать и т.д.).

LESS - это препроцессор CSS , который создает CSS до, который загружается в браузер, и, таким образом, до того, как среда будет проверяться (что делается в самом CSS, после того, как он был сгенерирован LESS).

Таким образом, правильный метод для LESS должен иметь тот же тип вывода, что и прямой CSS, что означает, что вам нужно повторить селектор .menu в запросе @media, чтобы его значение изменилось для типа носителя.

Окончательный вывод CSS должен быть чем-то вроде

@media only screen and (max-width: 400px) {
  .menu {
    width: 100px; 
  }
}

.menu {
  width: 300px;
}

Существуют различные способы генерации чего-то вроде LESS. Строго принимая ваш основной формат выше, есть следующее:

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  .menu {
    width: @menu-width - 200px; /* assuming you want it dynamic to default */
  }
}

.menu {
  width: @menu-width;
}

Но также посмотрите:

Ответ 2

да, но таким образом вы должны переписать все

лучший способ должен быть (но он не работает)

@w : 10px

@media (min-width: 1440px) {

    @w:500px;

}
@media (min-width: 1024px) and (max-width: 1280px) {

@w:300px;

}

@media (min-width: 800px) and (max-width: 1020px) {

    @w:200px;
}

.any{
        width:@w;
    }