使用 window.innerwidth 获取屏幕宽度不起作用

Question

目前我正在尝试使用 useEffect 来操纵我的 DOM 元素来制作视差效果，但这不是响应式的。所以目前要解决这个问题，我正在尝试获取屏幕宽度并添加条件，以便每当屏幕为特定尺寸时，它应该以特定方式更改 DOM 元素。为了获得屏幕宽度，我使用 const width = window.innerWidth; 但这给了我

ReferenceError: window is not defined

我在我的 codesandbox 上试过了，它并没有用完全相同的代码给我这个错误。所以我对此有两个问题。一是我如何摆脱这个错误，二是有没有更好的方法来使这个响应而不指定每个屏幕的宽度并相应地更改 DOM？

代码沙箱：https://codesandbox.io/s/laughing-pascal-vc45v?file=/src/App.js

代码：

export default function App() {
  const width = window.innerWidth;
  console.log(width);
  if(width>1000){
  useEffect(function onFirstMount() {
    const changeBackground = () => {
      let value = window.scrollY;

      let img = document.getElementById("moveLeft");
      let text = document.getElementById("moveUp");

      let imgWidth = 280;

      text.style.marginTop = "-" + value * 0.5 + "px";
      text2.style.transform = `translateX(${value * 1.3}px)`;

      if (value > 600) {
        img.style.transform = `translateX(${value * 0.8 - 480 - imgWidth}px)`;
      } else {
        img.style.transform = `translateX(-${value * 0.5}px)`;
      }

      if (value > 1400) {
        img.style.transform = `translateX(${
          -1 * (value * 0.8 - 1120) + 80 + imgWidth
        }px)`;
      }

      if (value > 1700) {
        setNumber(true);
      } else {
        setNumber(false);
      }
    };
    window.addEventListener("scroll", changeBackground);
    return () => window.removeEventListener("scroll", changeBackground);
  }, []);
}

Answer 1

您的页面是服务器端呈现的，因此来自服务器 window 未定义。

您可以使用下面的示例摆脱它

const width = window?.innerWidth || yourDefaultWidth

但是为了更好地解决从 SSR 获得正确的 window 维度，请检查

Answer 2

要根据浏览器动态更改样式，最好在 CSS 文件中使用媒体查询。

@media only screen and (max-width: 200px) {
  body {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 480px) {
  body {
    margin-top: 40px;
  }
}

使用 window.innerwidth 获取屏幕宽度不起作用

Getting width of screen using window.innerwidth not working

javascript

css

css-animations

reactjs