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

Question

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

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

我已经着手解决的问题是根据媒体查询更改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);

有关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);
}