使用浏览器调整页面大小
问题描述:
我正在为The Odin Project执行第一个项目,该项目正在重新创建Google主页。我认为我看起来相当不错,考虑到我只待了几个星期,但是当我将我的页面从全屏模式中移出时,会出现一个滚动条。如果您查看Google首页,则页面本身将调整大小,而不是使用滚动条。 Overflow:hidden
显然只会切断页面的底部,所以我不想那样。如果我没有足够具体,我很抱歉,但这是我的Github的link来检查它。使用浏览器调整页面大小
如果你看到我做的事情完全错误或混乱,我真的很喜欢一些批评。
答
我还没有看过你的GitHub,但我会建议合并bootstrap,它基本上可以让你开发响应屏幕尺寸的页面。
您可能会发现本教程有帮助: https://www.w3schools.com/bootstrap/
答
通过你的Github上快速浏览后,要设置一个min-width: 500px
您all
类contans所有的内容。请改为设置all
类width: 100%
。这将允许您的内容填充页面并根据屏幕大小进行调整。
当然,一旦你真的小和内容击中了每个-另一方面,他们将打破其他线路,但你必须处理与媒体的查询,来调整/缩放等等
.all {
margin-left: auto;
margin-right: auto;
width: 100%;
}
答
其实,我所要做的就是删除所有.all
样式来解决此问题。我还修复了页脚,以便它粘在页面的底部。最后,如果你想输入的内容好,使用media queries像这样:
@media (max-width: 500px /* or whatever */) {
input {
width: 80%;
}
}
这将在屏幕上输入的宽度设置为80%大小500px
小。 Hre是我改变的一支笔:https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100
欢迎来到Stack Overflow!寻求代码帮助的问题必须包括在问题本身**中重现它所需的最短代码**,最好在** Stack Snippet **中。虽然您提供了一个链接,但如果它变得无效,那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。请参阅[**我网站上的某些内容不起作用,我可以只粘贴一个链接**](http://meta.*.com/questions/254428/something-in-my-web-site-or-project-犯规,工作可以-I-刚刚糊一个链接到它)。 –