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

Question

Я анимирую на основе позиции прокрутки, используя TweenMax. Положение, в котором я хочу анимировать, меняется в зависимости от размера экрана. Можно ли изменить переменную в зависимости от ширины экрана?

Я довольно новичок и использую множество решений для копирования / вставки. У меня есть два прямоугольных элемента рядом друг с другом, которые переворачиваются как карточки для отображения информации на обороте. При просмотре на экране мобильного устройства эти карты складываются вертикально, а не рядом друг с другом. Это затем меняет точку, в которой я хочу анимировать переворачивание карты.

Решение, которое я нашел, состоит в том, чтобы изменить var sceneStart в зависимости от медиазапроса. Это всего лишь идея для решения проблемы.

Это то, что я пытался безуспешно.

var sceneStart2;
if (window.matchMedia("(max-width: 480px)")) {
  sceneStart2 = 3500
} else {
  sceneStart2 = 2000
}

Ожидаемый результат на большом экране, в то время как div находятся рядом друг с другом, card2 переворачивается на 2000, но на мобильном экране карта переходит на 3500.

Фактический результат заключается в том, что он полностью разбивает флип и не работает.

Answer 1

Вам необходимо проверить matches свойство MediaQueryList, возвращаемое matchMedia:

var sceneStart2;
if (window.matchMedia("(max-width: 480px)").matches) {
  sceneStart2 = 3500
} else {
  sceneStart2 = 2000
}
console.log(sceneStart2);

Проверьте эту статью на MDN для получения дополнительной информации о matchMedia.

Если вы хотите, чтобы это обновлялось при изменении размера окна, вы можете переместить эту логику в функцию, которая вызывается изначально и при каждом событии изменения размера окна:

var sceneStart2;

calcSceneStart2();
window.addEventListener('resize', calcSceneStart2);

function calcSceneStart2() {
  if (window.matchMedia("(max-width: 480px)").matches) {
    sceneStart2 = 3500
  } else {
    sceneStart2 = 2000
  }
  console.log(sceneStart2);
}