如何根據屏幕寬度定義變量？

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

您需要檢查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); }