Css 更改div'；s"；“感知窗宽”；

我想让div的内容与它的大小相适应，就像if 这是一个iframe，但我不能用。 我的目的是使内容适应，就好像它是在一个真正的小 屏幕，用户可以在移动设备上预览div内容。 iframe可以工作，但它破坏了react的diff算法，因此我不能再使用父道具更改帧内容

所以，我想能够调整一个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, 100%)'
      : '100%',
    margin: '0% auto',
    marginTop: props?.format === 'mobile'
    && theme.breakpoints.down('md')
      ? '5%'
      : '0%',
  }),
}))

const Index=（{format}）=>{
const classes=useStyles（{format}）
//如果我使用iframe而不是div，断点会起作用，
//但它打破了很多应用程序的逻辑
返回
}
const useStyles=makeStyles（主题=>({
root:props=>({
溢出：道具？.format？'auto'：'visible'，
maxWidth:props？.format=='mobile'
“最低（414px，100%）”
：道具？.format==“平板电脑”
“最小值（768px，100%）”
: '100%',
maxHeight:props？.format==='mobile'
？最小值（736px，100%）'
：道具？.format==“平板电脑”
？最小值（1024px，100%）'
: '100%',
边距：“0%自动”，
marginTop:props？.format==='mobile'
&&theme.breakpoints.down（'md'）
? '5%'
: '0%',
}),
}))

我正在使用材质ui和jss进行样式设计

---

谢谢

你能给出你的html和css代码吗？你需要css转换比例（）实际上，我想伪造一个视口，这样内部元素就会触发相关的css媒体查询。缩放只会拉伸或变形它们。我想实现类似于storybook viewport的功能。