我注意到，在一些屏幕和初始加载中，我的网站内容会跳起来，碰到横幅的底部。调整窗口大小时，横幅会无缝调整大小以适应。然而，在调整窗口大小时，您会注意到内容上下跳跃。我觉得这与头球的高度有关，但不确定为什么会推迟与横幅底部的会面。
我在这里发布了代码问题，但没有直接问这个问题，试图解决这个问题。(例如，制作一个脚本，当横幅大小发生变化时，该脚本会更改标题高度。)但未能按我需要的方式运行，我认为这是错误的路线。
您可以在此处查看网站-调整浏览器窗口的大小以查看内容的上下浮动。
如果能在正确的方向上帮助我解决这个问题，那将是非常棒的！谢谢
您使用的CSS布局试图完美地"适应"所有内容。这被称为一种全面的设计(在css中定义的每个"断点"上，它甚至试图使用不同的高度)。虽然这对一个网站来说很好(这意味着在任何设备上都很好看)，但它确实给css带来了一些压力。
不幸的是，很难在评论中帮助你。因为它需要一些基本的重构才能获得更好的性能。然而，如果你有兴趣修复它，一个开始学习如何处理的好地方是：https://developers.google.com/web/fundamentals/performance/rendering/
此外，如果你感兴趣，这可能有助于分配，你可以真正"看到"你的计算机(或设备)在绘图性能方面有多努力。在Chrome(OS X或Windows，没关系)中，您可以打开检查视图(ctrl+shift+j)，然后转到上栏的时间选项卡。打开网站后，按最左边的"录制按钮"，然后调整浏览器大小并按停止录制。您最终会看到一个类似于以下内容的屏幕：https://i.stack.imgur.com/6lS3I.png(这只是一个例子，而不是你的网站)。
在时间轴视图中，您可以跟踪您的性能，您希望避免使用紫色(布局)条，因为这会在性能方面"花费"很多(前面提到的链接也很好地解释了这一点)。作为开发人员，我们倾向于以60fps的绘图性能为目标，但这需要付出相当大的努力才能达到(尤其是在完全响应的网站上)。目前，仅在你的网站上(在我的游戏电脑上)，布局破坏就需要大约15毫秒和10毫秒的时间。当我"剥离"网站(只留下标题)时，调整大小的速度足够快，可以顺利渲染。很明显，问题的解决方案可以在优化CSS中找到。
顺便说一句，除了调整大小之外，您似乎在性能方面没有太多问题。没有沉重的脚本运行滚动或任何东西。这已经是一件好事了。我敢肯定，你的大多数访客不会一直调整大小；-)希望这能有所帮助！
我不确定，但我认为这是因为您的响应式设计没有定义最小宽度和最大宽度。
它用于限制具有响应性设计的元素不要变得太大或太小。
示例：
.header {
opacity: 0.7;
font-size: 8pt;
color: grey;
width: 100%;
min-width: 150px;
vertical-align: top;
}
你可以试着在这里阅读一些关于它的内容，祝你好运，修复那个页面：)http://www.w3schools.com/cssref/pr_dim_min-width.asp