Question

我正在为The Odin Project做第一个项目，该项目正在重建Google主页。我认为我的表现相当不错，因为我只是在这几个星期，但当我的页面退出全屏模式时，会出现一个滚动条。如果您查看Google主页，页面本身会调整大小而不是使用滚动条。 Overflow:hidden显然会切断页面的底部，所以我不希望这样。如果我不够具体，我很抱歉，但这是link给我的Github查看它。

如果你看到任何我完全错误或凌乱的事情，我真的很喜欢一些批评。

Answer 1

我还没看过你的GitHub，但我建议合并bootstrap，它基本上可以让你根据屏幕尺寸开发页面。

您可能会发现本教程很有帮助： https://www.w3schools.com/bootstrap/

Answer 2

快速查看您的Github后，您将min-width: 500px设置为all课程，其中包含您的所有内容。请尝试设置all班width: 100%。这将允许您的内容填充页面并在屏幕大小调整时进行调整。

当然，一旦你变得非常小并且内容相互击中它们就会突破到其他线路，但你必须通过媒体查询来处理它以调整大小/缩放等......

.all {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

Answer 3

实际上，我所要做的就是删除所有.all样式来解决此问题。我还修复了你的页脚，使其粘在页面底部。最后，如果您想要很好地输入大小，请使用media queries，如下所示：

@media (max-width: 500px /* or whatever */) {
   input {
      width: 80%;
   }
}

这会将屏幕尺寸500px及更小的输入宽度设置为80％。我改变了一笔：https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100

使用浏览器调整页面大小

3 个答案: