我将 3 个不同的 react.js 项目集成到一个项目中。我应该在屏幕左侧显示项目一，在右侧显示项目二，在两者的底部显示项目三。但是项目一的 Web 视图内容的高度和宽度都非常大，如果我尝试更改其宽度并使其向左浮动，则会因为它的设计而重叠。我不应该更改项目一的实际代码。幸运的是，我有一个使用 css 媒体查询编写的项目的移动屏幕视图，它的大小看起来缩小了，非常适合我使用它。
我需要找到一种方法来显示我在屏幕左侧的项目一个移动分辨率断点代码，比如宽度：45% float：left。以某种方式使组件/项目适合具有移动断点大小或更小的窗口(根据需要位于屏幕左侧(，因此该窗口中的组件认为"浏览器窗口很小，我必须显示我的移动视图"，如果它有意义。我尝试修改项目 1 的 head 标签 -尝试更改 head 标签中视口元标记的初始比例和宽度。似乎什么都不起作用。不确定我是否正确，但如果有人能从中理解并提供帮助，我将不胜感激。
您可以使用iframe将项目定位为所需的任何布局。您可以修复iframe的高度和宽度。
.iframes {
display: flex;
justify-content: space-between;
align-items: center;
}
.bottom-iframe {
width: 100%;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="iframes">
<iframe width="300" height="300"></iframe>
<iframe width="300" height="300"></iframe>
</div>
<div class="bottom-iframe">
<iframe width="300" height="300"></iframe>
</div>
<script src="script.js">
</script>
</body>
</html>