使用浏览器调整页面大小

-2

我正在为The Odin Project执行第一个项目，该项目正在重新创建Google主页。我认为我看起来相当不错，考虑到我只待了几个星期，但是当我将我的页面从全屏模式中移出时，会出现一个滚动条。如果您查看Google首页，则页面本身将调整大小，而不是使用滚动条。 Overflow:hidden显然只会切断页面的底部，所以我不想那样。如果我没有足够具体，我很抱歉，但这是我的Github的link来检查它。使用浏览器调整页面大小

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

来源

2017-04-06 kevin oneill

欢迎来到Stack Overflow！寻求代码帮助的问题必须包括在问题本身**中重现它所需的最短代码**，最好在** Stack Snippet **中。虽然您提供了一个链接，但如果它变得无效，那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。请参阅[**我网站上的某些内容不起作用，我可以只粘贴一个链接**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-犯规，工作可以-I-刚刚糊一个链接到它）。 –

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

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

来源

2017-04-06 15:52:52 Maja

通过你的Github上快速浏览后，要设置一个min-width: 500px您all类contans所有的内容。请改为设置all类width: 100%。这将允许您的内容填充页面并根据屏幕大小进行调整。

当然，一旦你真的小和内容击中了每个-另一方面，他们将打破其他线路，但你必须处理与媒体的查询，来调整/缩放等等

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

来源

2017-04-06 15:59:43

其实，我所要做的就是删除所有.all样式来解决此问题。我还修复了页脚，以便它粘在页面的底部。最后，如果你想输入的内容好，使用media queries像这样：

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

这将在屏幕上输入的宽度设置为80％大小500px小。 Hre是我改变的一支笔：https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100

来源

2017-04-06 16:07:31

使用浏览器调整页面大小

回答

相关问题