Как использовать несколько медиа-запросов в классе Css меньше? - PullRequest
Новая
       6

Как использовать несколько медиа-запросов в классе Css меньше?

0 голосов
/ 08 ноября 2018

У меня есть меньше файл, содержащий простой класс CSS, который должен иметь различные стили, применяемые для экрана разных размеров. Следующий код работает только на рабочем столе (первый @desktop медиа-запрос). Ничего не происходит для мобильных устройств. Я попробовал много вариантов этого синтаксиса без удачи и не нашел ничего об этом в документации. Вы также можете увидеть живую демонстрацию здесь (обратите внимание, что если вы растянете экран шире, чем 1024px, div станет оранжевым, но он не станет красным или зеленым, когда меньше, чем 1024px, как должно). Спасибо.

HTML 

<div class="derp">
Hello
</div>

меньше 

@desktop-min-width:         1024px;
@phone-max-width:           768px;

@desktop: ~"only screen and (min-width: @{desktop-min-width})";
@tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}";
@phone: ~"only screen and (max-width: @{phone-max-width})";

@appHeight:     749px;
@appWidth:      421px;

.derp {
  @media @desktop {
      background-color: orange;
    }

  @media @tablet {
      background-color: red;
    }

  @media @phone {
    background-color: green;
  }
}

1 Ответ

0 голосов
/ 08 ноября 2018

Есть проблема с 

@tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}";

Удалите его на мгновение, и вы увидите зеленый фон, отображаемый на экране телефона.

Вам нужно добавить ")" для @tablet в конце

...