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

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

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

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

这是我一直努力想做的，但没有成功

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

预期的结果是在一个大屏幕上，div彼此并排，card2在2000时翻转，但在移动屏幕上，card在3500时翻转

---

实际结果是，它完全破坏了翻转，无法正常工作。

您需要检查

匹配媒体

返回的

媒体查询列表

的

匹配属性：


var-sceneStart2；
if（window.matchMedia（“（最大宽度：480px）”）.matches）{
场景START2=3500
}否则{
场景START2=2000
}
控制台日志（scenestar2）
窗口。availWidth

显示屏幕宽度。谢谢！这就解决了问题。谢谢你的补充阅读。现在接下来的问题是，当你调整窗口大小时，我如何才能进行此工作？你可以将此逻辑移到一个函数中，并在窗口调整大小时调用该函数。我会把它添加到我的答案中。当我把它放到完整的脚本中时，它不起作用。注释框中没有足够的空间粘贴完整的代码。我应该编辑原始问题并粘贴完整脚本吗？