时间戳

首页 > 解决方案 > React 和垂直响应式设计

html - React 和垂直响应式设计

问题描述

伙计们。这个让我难住了。我浏览了几篇帖子，似乎找不到完全相同的问题。我正在创建一个模仿 Windows 或 Mac 或 Linux 桌面 UI 的 React 应用程序。换句话说，我不希望正常的垂直（或水平）滚动条在网络浏览器中弹出。我发现了一个关于如何在 CSS 和 flexbox 中完成此任务的 stackoverflow 的很好的示例。

html,
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted #0313fc;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
  overflow: auto;
}

.box .row.footer {
  flex: 0 1 40px;
}


img {
  height: 95%;
  width: 95%;
  object-fit: contain;
}

上面的 CSS 在一个普通的 HTML/CSS 文件中完美运行。当我垂直调整浏览器窗口大小时，其中的元素是响应式的。当我在样板文件 create-react-app 中执行完全相同的操作时，它会失败。该页面是水平响应的，但不是垂直响应的。我删除了所有额外的 css 文件（如 App.css），并将上面的内容转储到我首先清除的 index.css 文件中。

查看 Chrome 浏览器窗口中的样式，所有样式看起来都与原版 HTML 中的样式相同。我不确定为什么浏览器在这个 React 项目中没有垂直响应。恐怕它是 webpack 中的东西或引擎盖下的其他东西。

如果有人对此有任何想法，我会全力以赴。谢谢！！！

标签： htmlcssreactjsresponsiveness

解决方案

当然，在我问这个之后，我找到了解决方案。在使用 React 这么多年之后，我忘记了它会将代码注入到索引 HTML 到 id="root" 的 div 中。一旦我将“box” CSS 类应用于该元素，它就会按预期工作！所以现在的问题是：有没有办法通过 React 将这个类注入到 HTML 中？:)

推荐阅读