时间戳

首页 > 解决方案 > 如何在不实际最小化浏览器窗口的情况下在全屏桌面视图上显示 react.js 组件的 css 移动视图分辨率？

javascript - 如何在不实际最小化浏览器窗口的情况下在全屏桌面视图上显示 react.js 组件的 css 移动视图分辨率？

问题描述

我将 3 个不同的 react.js 项目集成到一个项目中。我应该在屏幕左侧显示项目一，在右侧显示项目二，在两者底部显示项目三。但是项目一的网页视图内容在高度和宽度上都非常大，如果我试图改变它的宽度并让它向左浮动，它会因为它的设计而重叠。我不应该更改项目一的实际代码。幸运的是，我有一个使用 css 媒体查询编写的项目的移动屏幕视图，它看起来按比例缩小，非常适合我使用它。

我需要想办法在屏幕左侧显示项目一个移动分辨率断点代码，比如宽度：45% 浮动：左。不知何故，使组件/项目适合移动断点大小或更小的窗口（它像我需要的那样位于屏幕左侧），因此该窗口内的组件认为“浏览器窗口很小，我有显示我的移动视图”，如果有意义的话。我尝试修改项目的头标签 -尝试更改头标签中视口元标签的初始比例和宽度。似乎没有任何效果。不确定我是否说得对，但如果有人能从中理解并提供帮助，我将不胜感激。

标签： javascripthtmlcssreactjs

解决方案

您可以使用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>

推荐阅读