javascript - React-Spring 根据媒体查询改变视差偏移

Question

我在网页上使用 React Spring for Parallax，但是页面上较高的组件之一<Section2 />使用 flexbox 强制 4 个大的水平图标在较小的屏幕上呈现为 2 x 2 图标。

<Section3>发生这种情况时，它会导致移动视图中的偏移值错误。所以我的问题是如何通过媒体查询或其他方式更改偏移值。

这是我的代码：

const Home = () => {

  return (
    <>
      <Layout>
        <SEO title="Home" />
        <Parallax pages={4}>
          <ParallaxLayer offset={0} speed={1} style={{ zIndex: '5' }}>
            <Hero />
          </ParallaxLayer>
          <ParallaxLayer offset={0.7} speed={1.4} style={{ zIndex: '10' }}>
            <HeroName />
          </ParallaxLayer>
          <ParallaxLayer
            offset={0.8}
            speed={0.7}
            style={{ zIndex: '-1', backgroundColor: '#fcf7f0' }}
          >
            <Section1 />
          </ParallaxLayer>
          <ParallaxLayer offset={1} speed={0.8} style={{ zIndex: '3' }}>
            <Section2 />
          </ParallaxLayer>
          <ParallaxLayer offset={1.2} speed={0.5} >
           <Section3 />
          </ParallaxLayer>
        </Parallax>
      </Layout>
    </>
  );
};  

非常感谢

标签： javascriptreactjsreact-spring

Answer 1

我通过使用三元解决了这个问题。 offset={window.innerWidth < 768 ? 2.1 : 1.2}