Изменение переменной в зависимости от ширины экрана?

Question

[lebedev121]

Как мне изменять значение переменной в зависимости от ширины экрана?
Я пробую сделать вот так:

@media (min-width: 767px) {
	$size: 1vmax;
}

@media (max-width: 767px) {
	$size: 1.5vmax;
}

h2 {
   font-size: $size;
}

Но выдаётся ошибка компиляци, дескать переменная неопределена.

Answer 1

[sergski]

в вашем случае добавьте флаг !global:
$size: 1vmax !global;

Comments

[lebedev121]

с этим флагом компилится без ошибок, но в браузере на любом разрешении экрана переменная равна 1.5vmax. То есть берётся значение из самого нижнего блока @media. игнорируя условия max-width

[sergski]

lebedev121, если вы выставили флаги в обеих media, то да

Answer 2

[vadim-tut]

Мне помогло присвоение ID CSS элементу <div id="7888"> и далее я обращался к свойствам переменной через Java Script:

<script>			
const mq = window.matchMedia('(max-width: 570px)');
if (mq.matches) {
    // ширина окна меньше, чем 570px
  document.getElementById("7888").style.height = "500px";
} else {
    // ширина окна больше, чем 570px
   document.getElementById("7888").style.height = "900px";
}			
			 </script>

В данном примере я менял CSS свойство Height. Как мне показалось важно Java Script прописывать, после кода с присвоением ID, иначе у меня ID не находило.