ewewezze
@ewewezze
молодой верстальщик

Не работают @media-query на Vue 2, как исправить?

У меня есть проект на Vue 2. На моменте с описаниями базовых стилей столкнулся с проблемой что всю "@media" не видно.
Вот мой код:
:root {
  /* Colors */
  --black: #191919;
  --green: #3eaf7c;
  --white: #eeeeee;

  /* Sizes */
  --desktop: 1440px;
  --tablet: 992px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

body {
  background: var(--black);
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--white);
}

.container {
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (max-width: var(--tablet)) {
  body {
    font-size: 20px;
  }

  .container {
    max-width: 860px !important;
  }
}

@media (max-width: var(--desktop)) {
  body {
    font-size: 24px;
  }

  .container {
    max-width: 1440px !important;
  }
}


Также мета-тэг присутствует:
<meta name="viewport" content="width=device-width, initial-scale=1">


Я пробовал:
-не использовать переменные
-использовать другие значения
-подключать через html, а не через main.js

Доп. инфо:
-все стили до и после @media-запроса работают, не работает только @media-запросы
-сборщик ничего не говорит
-ошибок никаких нет
-в консоли (инспектор) ничего про media нет
Подключение стилей верное ибо все стили кроме "@media" работают.
Может кто то сталкивался с таким же, помогите
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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