如何根据屏幕宽度定义变量？

Question

我正在使用 TweenMax 根据滚动位置制作动画。我想要动画的位置会根据屏幕大小而变化。是否可以根据屏幕宽度进行可变变化？

我是新手，使用了很多复制/粘贴解决方案。 我有两个相邻的矩形 div，它们像卡片一样翻转以在背面显示信息。在移动屏幕上查看时，这些卡片垂直堆叠，而不是彼此并排。然后，这会改变我想要为卡片翻转设置动画的点。

我找到的解决方案是根据媒体查询更改 var sceneStart。这只是解决问题的一个想法。

这是我尝试过的，但没有成功。

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

预期结果是在大屏幕上，而 div 并排，card2 在 2000 处翻转，但在移动屏幕上，卡片在 3500 处翻转。

实际结果是它完全破坏了翻转并且不起作用。

Answer 1

您需要检查matchMedia返回的MediaQueryList的matches属性：

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

查看this article on 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);
}