반응으로 화면 크기에 따라 레이아웃을 변경하는 방법

Question

주어진 화면 크기에 맞춰 레이아웃을 변경하여 내 사이트가 모바일보기에 맞을 때 내 방식이 바뀔 수 있도록하고 싶습니다.

현재 수평 Horitzontal Scroll Package

내가 나를 미디어 쿼리를 실행할 수 있지만, 두 패키지 사이에 충돌이있을 것처럼 보이는 반응 응답 패키지와 함께이 구현하려고 한 패키지를 사용하여 사이트 스크롤 반응의 나.

그래서 전체 화면 (데스크톱 및 테이블)에서 내 사이트를 가로 스크롤 한 다음 모바일보기에서 위에서 아래로 스크롤하고 싶습니다. 내가 어떻게 할까?

class Home extends React.Component{ 
constructor(props) { 
    super(props); 
    this.state = {}; 
} 

componentWillMount() { 
    this.setState({ 
     home: projectsData.filter(p => p.name === "homepage"), 
     galleryImages: [ 
      ImgOne, 
      ImgTwo, 
      ImgThree, 
      ImgFour, 
      ImgFive, 
      ImgSix 
     ] 
    }); 
} 

render(){ 

    const test = { color: "black", position: "fixed" } 
    return(
     <div className="row"> 
      <Responsive minWidth={992}> 
       <HorizontalScroll reverseScroll={true}> 
        <Header /> 
        <SplashScreen /> 
        <CopyText /> 
       </HorizontalScroll> 
      </Responsive> 
     </div> 
    ); 
    } 
} 

참고 : 수평 스크롤 패키지는 비율로 크기 조정을 지원하지 않습니다.

Answer 1

미디어 쿼리를 살펴 보는 것이 좋습니다. Here은 기본을 보여주는 짧은 동영상입니다.

이러한 조건에서 별도의 스타일을 트리거하는 임계 값을 설정할 수 있습니다. UI가 다른 크기로 다른 것을하기를 원할 때 매우 유용 할 수 있습니다.

@media only screen 
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) { 
    //css goes here with whatever css you want to fire at this threshold 
} 

Answer 2

HorizontalScroll 구성 요소에 익숙하지 않지만 React로 화면 크기에 따라 레이아웃을 변경하는 방법에 대한 코드 예제를 제공 할 수 있습니다.

class WindowWidth extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    this.onResize = this.onResize.bind(this); 
    } 
    render() { 
    return this.props.children({ width: this.state.width }); 
    } 
    getWindowWidth() { 
    return Math.max(
     document.documentElement.clientWidth, 
     window.innerWidth || 0 
    ); 
    } 
    onResize() { 
    window.requestAnimationFrame(() => { 
     this.setState({ 
     width: this.getWindowWidth() 
     }); 
    }); 
    } 
    componentWillMount() { 
    this.setState({ 
     width: this.getWindowWidth() 
    }); 
    } 
    componentDidMount() { 
    window.addEventListener("resize", this.onResize); 
    } 
    componentWillUnmount() { 
    window.removeEventListener("resize", this.onResize); 
    } 
} 

const Vertical = props => <div> Vertical component: {props.children}</div>; 
const Horizontal = props => <div> Horizontal component: {props.children}</div>; 

ReactDOM.render(
    <WindowWidth> 
    {({ width }) => { 
     if (width >= 992) { 
     return <Horizontal>{width}px</Horizontal>; 
     } 
     return <Vertical>{width}px</Vertical>; 
    }} 
    </WindowWidth>, 
    document.querySelector("#react-app") 
);