时间戳

首页 > 解决方案 > 在具有元素大小的较小 div 中模仿 1920x1080 窗口

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

问题描述

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

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

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

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

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

控制面板查看窗口示例

标签： javascripthtmlcssreactjselectron

解决方案

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

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

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

推荐阅读