移动移动中的水平滚动

Question

我开发了一个网站。当我在我的笔记本电脑上调整浏览器窗口大小时它看起来很好但是当我在移动浏览器中打开它时，它设置了一个水平滚动，使它看起来很奇怪。任何帮助都非常感谢。 链接：https://dcheroes.uphero.com

Answer 1

如果您希望以响应式开发，则必须使用媒体查询

@media screen and (max-width: ** px) and (min-width: **px) {
}

每当您将width用于最外层元素时，只需将其替换为max-width。有关更多信息，请阅读以下文章

Max-width MDN

Media queries

Answer 2

这称为创建响应式设计。创建响应式设计需要更多的HTML / CSS知识。

了解响应式设计以及如何在此处创建它们：https://www.w3schools.com/html/html_responsive.asp

您是否考虑过使用Bootstrap，这可以让您更轻松地创建响应式设计，因为他们已经为您完成了大部分工作。

了解Bootstrap以及如何在此处使用它： https://www.w3schools.com/bootstrap/

编辑：我很抱歉，看起来你已经在使用Bootstrap了。但几乎没有使用它IE：你没有使用<div class="container">或div class="row"或类col-md-6等。我强烈建议您使用Bootstrap，确保始终使用他们的设计语言。