更改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 (将#修改为@）