css, измените меньше переменной с @media

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

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

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

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

.menu {
  width: @menu-width;
}
11
css less variables

2 ответов

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

помните @media - это запрос CSS, а не меньший запрос

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

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

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

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

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

.menu {
  width: 300px;
}

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

@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;
}

, но и посмотреть:

9

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

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

@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;
    }
-3