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

Question

[Бай Кабиров]

У меня есть проект на 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" работают.
Может кто то сталкивался с таким же, помогите

Comments

[alexalexes]

Область просмотра браузера уменьшали по ширине до отметок 992px, 1440px ?

[Бай Кабиров]

alexalexes, конечно, да на ключевые точки повесил изменение background'а - ноль изменений

[MaxRyazan]

У вас в стилях max-width. Возможно в контейнере нечему растягиваться на такую ширину? Попробуйте вместо max-width протестировать с width

[Бай Кабиров]

MaxRyazan, бестолку (

[Бай Кабиров]

Тут проблема в том что проект в целом игнорирует все медиа-запросы
он их тупо не видит никак не реагирует, ни шрифт не меняет, ни контейнер, ни бек-колор

[MaxRyazan]

попробуйте потестить с другими параметрами медиазапроса

@media (max-width: 1024) {
 ... 
}

[Бай Кабиров]

MaxRyazan, не сработало

[MaxRyazan]

попробуй не медиа запросы, а контейнерные запросы
https://developer.mozilla.org/en-US/docs/Web/CSS/@...

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

Типа в главном файле стилей написано так:

@import file-with-media from './'

... а потом тут переопределены стили контейнеров которые подпадают под медиа запросы