如何按屏幕大小javascript执行功能

Question

如何通过屏幕大小 javascript/bootstrap 执行功能？

这是 div ： <div className="col-sm hidden-md hidden-lg"></div>

我想设置这个功能（只在小屏幕上）： const [ navOpen, setNavOpen ] = useState(true)

代码在reactjs中，屏幕小时如何调用函数？

Answer 1

我怀疑使用Window.matchMedia 构建useEffect比使用. 这是 css 媒体查询的 JavaScript 等价物。这样你就可以使用事件驱动的东西了。innerWidth可能是这样的：const [ navOpen, setNavOpen ] = useState(true)useEffect(() => {  const x = window.matchMedia("(max-width: 700px)")  function myFunction(e) {    setNavOpen(false);  };  x.addListener(myFunction)  return () => x.removeListener(myFunction);}, []);注意：由于它有一个事件监听器，请注意有一个清理函数被返回以删除监听器。信用：我从w3schools复制了我的部分代码编辑：根据@agus-zubiaga 的推荐添加空依赖数组

Answer 2

您可以使用window.innerHeight来计算您的useState默认值：const [ navOpen, setNavOpen ] = useState(window.innerWidth > 320)但是，如果调整屏幕大小时导航应该自动打开和关闭。您可以使用Window.matchMedia()来对屏幕尺寸做出反应。如果这是一次性的，您可以像David784 的回答useEffect那样直接在钩子中使用它。就我而言，由于我在一个大型应用程序上工作，其中包含许多需要对屏幕大小做出反应的组件，我使用了一个名为react-responsive的库。它简化了 React 中的媒体查询。

Answer 3

例如，您可以在 useEffect 中检查窗口的宽度和高度，并将导航设置为打开或关闭。useEffect({&nbsp; &nbsp; const width = windows.innerWidth;&nbsp; &nbsp; const height = windows.innerHeight;&nbsp; &nbsp; if(height <= 720 && width <= 420){&nbsp; &nbsp; &nbsp; setNavOpen(true)&nbsp; &nbsp; }&nbsp; }, [])