全屏登陆页面：小屏幕上的文字超过 div

Question

我需要制作一个带有 h1 标题、h2 子标题和号召性用语按钮的经典全屏着陆页，以将内容滑动到网站的第一个 div。我真的希望你能帮助我，因为该网站应该很快就会上线，这是阻止我说它已经完成的一件事，我会尽力告诉你一切，以便你更好地了解正在发生的事情。

这是我的小提琴： jsfiddle.net/daghene/szp7yf7h/1/

这是一个真实页面的在线版本，第一个位是 下面的内容http://andreacordioli.com/macwip2

我正在使用 Skeleton Framework，包含全屏图像的 div 位于包裹网格的 .container 之外，而 h1、h2 和按钮位于其中。现在我有两个问题：

• 由于某种原因，只有在网站的这一部分，大于某个点的文本超过了页面宽度，使网站在某个点下可以水平滚动
• 我这样做是为了让文本在 550px 标记下变小，这是骨架网格发挥作用的地方。我在分辨率约为 1280x720 的摩托罗拉 Moto X 上对其进行了测试，并注意到如果我以横向方式检查网站，它不会触发较小分辨率的文本属性，并且文本再次超出窗口的宽度：Chrome 测试仪中的 iPhone 会发生这种情况太

我现在想知道的是：截至今天，制作 100% 响应式着陆页的最佳做法是什么，其中包含始终居中的简单内容，适用于所有可能的分辨率和设备方向没有超出边界，并且文本总是在一个合适的大小永远不会太大？

例如，超出宽度的文本是 8rem，在 Skeleton 中等于 80px。这是我想要实现的页面，当纵横比为 X:Y 且 Y 以某种方式大于 X 时，我需要在移动设备上为其提供不同的图像：

如果你尝试一下，它会起作用我什至在我的旧三星 Galaxy Tab 上进行了测试，它有超级旧的 Android 2 或 3 浏览器，这给了我比 IE 有更多的问题，但实际上用这段代码将所有内容正确居中......但主要问题是文本没有正确缩放，如果窗口太窄，它要么在右侧消失，使窗口在右侧可滚动并且大标题的一部分不可读，或者如果它变得太小（比如我的 1280x720 4,7" Moto X），号召性用语按钮就会消失，因为屏幕窗口太短并且还有浏览器栏。我把溢出：隐藏到这个窗口可以确保没有水平滚动，但真正的问题不是滚动，而是超出 div 的文本而不是变小。

最后的笔记！

• 如果您检查 css，H1 上有一个“-1rem 边距”，因为我 出于某种原因，在这个特定的部分中说 H1，仅此而已， 不居中。 H2 和 Button 居中，H1 不居中 只有在这里...不明白为什么。

• 如果您尝试使窗口水平变小，您可以看到文本首先触及右侧的窗口（在 Fiddle 和其他没有 html 和正文边距的链接中），仍然可以'不明白为什么，我觉得这就是阻止文本在变小的同时保持居中的原因。

Answer 1

在我看来，您描述的一些问题是因为在 550 像素宽的视口处，您的 h1 字体的大小从 5rem 跳到了 8rem。但是在这个视口大小下，没有足够的水平空间来容纳您的 h1 文本，因此它超过了其父 div 的宽度，因此似乎偏离了中心。

我认为一个解决方案是从第 1047 行开始将 http://andreacordioli.com/macwip2/css/includes.css 中的 CSS 调整为类似以下内容：

@media (max-width: 625px) {
  .bigImage h1 {
    font-size: 5rem;
  }
...
}

希望这会有所帮助！