在较小的div中模拟大小为1920x1080的窗口，并调整元素的尺寸。

Question

我正在处理一个使用两个窗口的项目，类似于视频播放器，其中主屏幕是一种控制面板，具有“预览”屏幕，而次要屏幕则是以1920x1080分辨率投影的观看内容。我希望较小的控制面板预览div能够匹配较大的观看窗口的样式。目前，我通过传递“windowInstance”属性到我的样式化组件中并进行相应的样式调整来实现，例如：

const SomeComponent = styled.div`
  height: ${props => props.windowInstance === 'controlPanel' ? '300px' : '400px'}; 
`
// ...
return (
  <SomeComponent windowInstance={windowInstance} />
)

(windowInstance是从父组件传递的。这与手头的问题无关，而且会变得有些复杂)

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

需要注意的是，两个窗口都不需要响应式设计，也永远不会被调整大小。下面是我在excalidraw中绘制的草图，以更好地描述目标:

- Bender

---

也许可以使用vw和vh？ - mplungjan

@mplungjan vh/vw 单位无法解决这个问题。它们是指窗口的大小，在控制面板的情况下，是整个控制面板窗口，而不仅仅是预览屏幕。 - Bender

也许这个链接能帮到你？ - WebbH

@WebbH 那个解决方案对于盒子大小很好，但我也希望像像素/ rem 大小也能被翻译。此外，试图将所有东西转换为相对百分比大小是一种令人沮丧的经历，因为有些元素根本无法以这种方式进行调整大小。 - Bender

也许您可以在控制面板中使用 iframe 来包含预览屏幕，然后对于所有内容（字体大小、边距、填充等等），都使用 rem。在这种情况下，您可以为 iframe 和全屏版本定义不同的根字体大小。 - keul

@keul，这实际上是一个非常有趣和创造性的解决方案！我很乐意尝试一下，但我刚刚发现了zoom CSS属性。我已经取得了非常积极的早期结果。我正在为预览屏幕设置一个类名，针对其所有子元素，然后根据预览屏幕与视窗大小的比例应用缩放。我会报告结果的。 - Bender

Answer 1

我通过使用之前不知道的CSS属性zoom解决了我的问题。它非常好用。我的预览屏幕恰好是我的视窗大小的47.5％。所以我这样解决了问题：

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

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

- Bender