如何解决更改div的“感知窗口宽度”
我想使div的内容响应其大小,就像 这是一个iframe,但我不能使用它。 我的目的是使内容像实际较小的内容一样适应 屏幕,以便用户可以在移动设备上预览div内容。 iframe可以使用,但是它破坏了react的diff算法,因此我无法再使用父项props更改帧内容。
所以,我希望能够调整div的大小,使其内容响应 是媒体查询,例如它们是否在较小的窗口中。
const Index = ({format}) => {
const classes = useStyles ({format})
// if I use iframe instead of div,the breakpoints works,// but it breaks a lot of app logic
return <div className={classes.root}>
<ChildrenToPerceiveBreakpoint/>
</div>
}
const useStyles = makeStyles(theme => ({
root: props => ({
overflow: props?.format ? 'auto' : 'visible',maxWidth: props?.format === 'mobile'
? 'min(414px,100%)'
: props?.format === 'tablet'
? 'min(768px,100%)'
: '100%',maxHeight: props?.format === 'mobile'
? 'min(736px,100%)'
: props?.format === 'tablet'
? 'min(1024px,margin: '0% auto',marginTop: props?.format === 'mobile'
&& theme.breakpoints.down('md')
? '5%'
: '0%',}),}))
我正在使用material-ui和jss作为样式。
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。