我希望在特定屏幕尺寸下能够更改我的布局,以便在移动视图时更改我的网站外观。
目前,我的React网站使用Horitzontal Scroll Package包水平滚动。
我尝试使用react-responsive包实现此目的,该包允许我运行媒体查询,但似乎两个包之间存在冲突。
因此,我希望我的网站在全屏(桌面和平板电脑)时水平滚动,然后在移动视图中从上到下滚动。我该如何做到这一点?
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>
);
}
}
注意:我知道horizontal-scroll包不支持使用百分比进行大小调整。