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

Question

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

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

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

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

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

预期结果是在大屏幕上，div 彼此相邻，card2 在 2000 处翻转，但在移动屏幕上，card 在 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);
}