![](/img/trans.png)
[英](SemanticUI + React) Changing HTML elements based on screen size best approach?
[英]How to changing layout based on screen size with react
我希望能夠在遇到給定的屏幕尺寸時更改其布局,以便可以更改其網站在移動視圖中的顯示方式。
目前,我的反應站點使用Horitzontal Scroll Package進行水平滾動
我嘗試使用react-response包實現此功能,該包允許我運行媒體查詢,但是兩個包之間似乎存在沖突。
所以我希望我的網站在全屏(桌面和表格)中水平滾動,然后在移動視圖中從上到下滾動。 我該怎么辦?
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>
);
}
}
注意:我知道水平滾動包不支持按百分比調整大小。
import React from 'react';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Hidden from '@material-ui/core/Hidden';
import withWidth from '@material-ui/core/withWidth';
import Typography from '@material-ui/core/Typography';
const styles = theme => ({
root: {
flexGrow: 1,
},
container: {
display: 'flex',
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'center',
color: theme.palette.text.secondary,
flex: '1 0 auto',
margin: theme.spacing.unit,
},
});
function BreakpointUp(props) {
const { classes } = props;
return (
<div className={classes.root}>
<Typography variant="subtitle1">Current width: {props.width}</Typography>
<div className={classes.container}>
<Hidden xsUp>
<Paper className={classes.paper}>xsUp</Paper>
</Hidden>
<Hidden smUp>
<Paper className={classes.paper}>smUp</Paper>
</Hidden>
<Hidden mdUp>
<Paper className={classes.paper}>mdUp</Paper>
</Hidden>
<Hidden lgUp>
<Paper className={classes.paper}>lgUp</Paper>
</Hidden>
<Hidden xlUp>
<Paper className={classes.paper}>xlUp</Paper>
</Hidden>
</div>
</div>
);
}
BreakpointUp.propTypes = {
classes: PropTypes.object.isRequired,
width: PropTypes.string.isRequired,
};
export default compose(
withStyles(styles),
withWidth(),
)(BreakpointUp);
我建議調查媒體查詢。 這是一個簡短的視頻,向您展示基本知識。
您可以設置一個閾值,在這些條件下將觸發單獨的樣式。 當您希望用戶界面以不同的大小執行不同的操作時,此功能非常有用。
@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
}
我不熟悉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")
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.