在具有元素大小的较小 div 中模仿 1920x1080 窗口答案

【问题标题】：Imitate 1920x1080 window in a smaller div with sizing of elements在具有元素大小的较小 div 中模仿 1920x1080 窗口
【发布时间】：2021-06-21 03:32:20
【问题描述】：

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

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

（windowInstance是从父组件传过来的，和手头的问题无关，有点复杂）

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

需要注意的是，两个窗口都不需要响应或永远不会调整大小。这是我在 excalidraw 中为更好地描述目标所做的草图：

【问题讨论】：

也许使用 vw 和 vh ？
@mplungjan vh/vw 单位不能解决这个问题。它们指的是窗口的大小，在控制面板的情况下是整个控制面板窗口，而不仅仅是预览屏幕。
或许this 会有所帮助？
@WebbH 该解决方案非常适合盒子大小，但我也希望像素/rem 大小也能很好地翻译。此外，尝试将所有内容转换为相对百分比大小是一种令人沮丧的体验，因为某些元素根本无法以这种方式调整大小。
也许您可以使用 iframe 将预览屏幕包含在控制面板中，然后使用rem 处理所有内容（字体大小、边距、内边距……真的所有内容） )。在这种情况下，您可以“只”为 iframe 和全屏版本定义不同的根字体大小。

标签： javascript html css reactjs electron

【解决方案1】：

我能够使用 css 属性 zoom 解决我的问题 - 这是我以前不知道的。它就像一个魅力。我的预览屏幕恰好是查看窗口大小的 47.5%。所以我解决了这样的问题：

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

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

【讨论】：