Javascript 在较小的分区中模拟1920x1080窗口，调整元素大小

我正在做一个项目，它使用两个窗口，类似于视频板，其中主屏幕是一个带有“预览”屏幕的控制面板，次屏幕是1920x1080分辨率的观看内容的投影。我希望较小的控制面板预览div与较大的查看窗口的样式相匹配。目前，我正在将“windowInstance”道具传递给我的样式化组件，并以这种方式调整样式，例如：

const SomeComponent=styled.div`
高度：${props=>props.windowInstance==='controlPanel'？'300px'：'400px'}；
`
// ...
返回(
)

（windowInstance是从父组件传递的。这与当前的问题无关，而且有点复杂）

显然，随着我的应用程序的发展，这已经变得相当单调乏味，除非我仔细计算窗口大小差异的百分比，并将其转换为新的属性值，否则没有什么是完全正确的。我想知道的是，使用CSS或JS是否有任何方法可以统一这些样式，并在两个屏幕上正确、相同地呈现结果

需要注意的是，这两个窗口都不需要响应，也不会调整大小。以下是我在excalidraw中绘制的草图，以更好地描述目标：

---

我能够使用css属性

zoom

解决我的问题，这是我以前不知道的。它就像一个符咒。我的预览屏幕恰好是我查看窗口大小的47.5%。所以我就这样解决了这个问题：

// Wrapper.js
return (
  <StyledWrapper className={windowInstance === 'controlPanel' && 'preview-screen'}>
    {children}
  </StyledWrapper>
)

// index.css
.preview-screen {
  zoom: 47.5%;
}

//Wrapper.js
返回(
{儿童}
)
//index.css
.预览屏幕{
变焦：47.5%；
}

也许使用大众和vh？@mplungjan vh/vw装置无法解决此问题。它们指的是窗口的大小，在控制面板的情况下，它是整个控制面板窗口，而不仅仅是预览屏幕。也许会有帮助？@WebbH该解决方案对于框大小很好，但我也希望像素/rem大小也能被转换。此外，尝试将所有内容转换为相对百分比大小也是一种令人沮丧的经历，因为某些元素的大小根本无法以这种方式调整。也许您可以使用iframe在控制面板中包含预览屏幕，然后使用

rem

处理所有内容（字体大小、边距、填充等等）。在这种情况下，您可以“仅”为iframe和全屏版本定义不同的根字体大小。