Question

我注意到在某些屏幕和初始加载时，我的网站内容会跳起来以满足横幅的底部。当您调整窗口大小时，横幅会无缝调整大小以适应。但是，在调整窗口大小时，您会注意到内容上下跳跃。我觉得它与标题高度有关，但不确定为什么它会在与标题的底部相遇时被延迟。

我在这里发布了代码问题而没有问这个问题直接试图解决问题。（例如，当横幅大小发生变化时，制作一个更改标题高度的脚本。）但是不能成功地按照我需要的方式工作，并认为这是错误的路径。

您可以看到该网站 HERE - 调整浏览器窗口大小以查看内容跳转和停止。

在正确的方向上，我能解决这个问题的任何帮助都会很棒！谢谢！

Answer 1

您正在使用CSS布局，试图完美地“适应”所有内容。这被称为reponsive设计（在你的css中定义的每个'断点'上它甚至尝试使用不同的高度）。虽然这对网站来说很不错（这意味着在任何设备上它看起来都很合适，但它确实会给css带来一些压力）。

不幸的是，评论很难帮到你。因为它需要一些基本的重构才能获得更好的性能。如果您有兴趣修复它，那么开始学习如何处理的好地方是：https://developers.google.com/web/fundamentals/performance/rendering/

此外，如果您感兴趣，这可能有助于分配，您实际上可以“看到”您的计算机（或设备）对绘图性能的影响有多大。在Chrome（OS X或Windows，无所谓）时，您可以打开检查视图（ctrl + shift + j）并转到上方栏中的timelime选项卡。打开网站后，按最左侧的“录制按钮”，然后调整浏览器大小并按停止录制。您将得到一个类似于此的屏幕：https://i.stack.imgur.com/6lS3I.png（这只是一个示例，而不是您的网站）。

在时间线视图中，您可以跟踪您的表现，您希望避免使用紫色（布局）栏，因为这会“花费”很多性能（前面提到的链接也非常好地解释了这一点）。作为开发人员，我们倾向于以60fps的绘图性能为目标，但这需要花费相当多的努力才能达到（特别是在完整的响应式网站上）。目前，在你的网站上（我的游戏电脑上），单独的布局垃圾需要大约15毫秒和10毫秒的油漆！当我'删除'网站（只留下标题）时，调整大小足够快，可以顺利渲染。显然，您可以在优化CSS时找到问题的解决方案。

另一方面，除了调整大小之外，您似乎似乎没有很多关于性能的问题。没有重型脚本围绕滚动或任何东西。哪个是好事。而且我很确定你的大部分访客都不会一直调整大小;-)希望这有帮助！

Answer 2

我不确定，但我认为这是因为您的响应式设计没有定义最小宽度和最大宽度。

它用于限制具有响应式设计的元素不会变得太大或太小。

样品：

.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

调整窗口大小时网站内容会上下跳动？

2 个答案: