So ändern Sie das Layout basierend auf der Bildschirmgröße mit reagieren

Question

Ich möchte in der Lage sein, mein Layout zu ändern, wenn ich eine bestimmte Bildschirmgröße erreicht, so dass ich die Art und Weise ändern kann, wie meine Website aussieht, wenn es eine mobile Ansicht trifft.

Derzeit meine Seite scrollt horizontal mit dem Paket Horitzontal Scroll Package

Ich habe versucht, die Umsetzung dieses mit dem reagieren ansprechendes Paket reagieren, die mir Medien ermöglichen Abfragen, aber es scheint zu sein, ein Konflikt zwischen den beiden Paketen zu laufen.

Also ich möchte meine Website horizontal scrollen, wenn im Vollbildmodus (Desktop und Tabelle) und dann von oben nach unten in der mobilen Ansicht scrollen. Wie würde ich das tun?

HINWEIS: Ich weiß, dass das horizontale Scroll-Paket keine Größenanpassung mit Prozentsätzen unterstützt.

Answer 1

Ich empfehle, Media Queries zu untersuchen. Here ist ein kurzes Video, um Ihnen die Grundlagen zu zeigen.

Sie können einen Schwellenwert festlegen, der unter diesen Bedingungen separate Stile auslöst. Es kann sehr nützlich sein, wenn Sie möchten, dass Ihre Benutzeroberfläche in verschiedenen Größen etwas anderes macht.

@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

Ich bin nicht mit der HorizontalScroll Komponente vertraut, aber ich kann Ihnen einen Code Beispiel geben, wie das Layout auf Bildschirmgröße basierend ändern mit 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") 
);