扩展到移动设备和小屏幕的一般问题

Question

我最近部署了我的第一个网站，在我的 1920x1080 宽屏显示器上，一切看起来都很棒。然而，在 13 英寸的笔记本电脑屏幕、平板电脑和手机上，事情开始变得非常奇怪。我一直在分析我的代码和一些开发工具，例如谷歌和针对移动设备的引导程序推荐，但我似乎不太明白什么在我的代码中需要修复。

在移动设备上，可以一直向右滚动到本不应该存在的网站部分，只需滚动到白色 space。我已经设法删除移动版的导航栏 - 一个开始，但老实说，我感觉有点 lost/overwhelmed 并且似乎无法找到此问题的根本原因。

这是我的网站：-redacted-

并且 -redacted- 是我的 github 存储库

Answer 1

您的 CSS 中有此规则，它破坏了 Bootstrap 中的 .container class 应该具有的响应效果（覆盖媒体查询-设置它应该使用的宽度，并且确实在页面的其他部分使用）：

.myskills .container {
  width: 1500px;
  position: relative;
  top: 35px;
}

设置固定宽度，在这个例子中，就是问题所在。

网站上可能有更多此类示例，因此我建议您删除您能找到的所有此类示例。

一般来说，我不主张在不确定为什么需要这样做的情况下覆盖 Bootstrap CSS classes，尤其是像 .container 这样的结构元素, .row 和 .col-xx-x classes.

Answer 2

问题是您对页面上的元素使用了固定宽度。

例如对于 class .container，您指定的宽度为 970px。尝试使用百分比，如下所示：

.container {
width: 80%;
margin: 0 auto; //to center it
}

您基本上可以采用此解决方案并将其应用于页面上的其他问题，例如页眉。

另请注意：

您还应该查看 媒体查询 ，这将使您能够保持页面在大屏幕上的原样，而只在小屏幕上更改它，例如定义最大宽度：

@media screen and (max-width: 800px) {
//anything you want for screens below a width of 800px
}

编辑：

我知道您正在使用 Bootstrap - 在这种情况下，您需要完全删除覆盖 Bootstrap 默认配置的所有语句。

无论如何，请记住上面的建议以便将来 CSS 编码。

Answer 3

您已将容器宽度设置为 px。

尝试使用 % 更改它们或直接 删除那些 px 度量值 。

Bootstrap containers自己调整到自己需要的正确宽度。

Problems scaling to mobile and small screens in general