全屏着陆页：文字超出小屏幕上的div

Question

我需要创建一个经典的全屏登录页面，其中包含h1标题，h2子标题和号召性用语按钮，以将内容滑动到网站的第一个div。我真的希望你可以帮助我，因为网站很快就会上网，这是阻止我说完它的一件事，我会试着告诉你一切，所以你有一个更好地了解正在发生的事情。

  

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

     

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

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

• 由于某种原因，只有在网站的这一部分，大于某一点的文字超出了网页宽度，使网站在某一点水平滚动
• 我做到了，所以文字在550px标记下变小，这是Skeleton网格发挥作用的地方。我在我的摩托罗拉Moto X上进行了测试，它有大约1280x720的分辨率，并注意到如果我在横向检查网站它不会触发较小分辨率的文本部分并且文本再次超出了windo的宽度：这发生在iPhone上Chrome测试仪也是

我现在想知道的是：截至今天，制作100％响应式目标网页的最佳做法，这些简单的内容始终居于中心，适用于所有可能分辨率和设备方向没有超出边界，并且文本总是处于一个不错的大小永远不会太大？

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

如果你尝试它有点工作 我甚至在旧的，第一个三星Galaxy Tab 上测试它，它有超级旧的Android 2或3浏览器，它给了我比IE更多的问题，但实际上使用此代码正确地集中了所有内容......但主要问题是文本没有正确缩放，如果窗口太窄，它就会消失在右边，使窗口可以滚动右边和大标题的一部分不可读，或者如果它太小（比如我的1280x720 4,7和＃34; Moto X），由于屏幕窗口太短而且浏览器栏有，因此号召性用语按钮消失了太。我把溢出：隐藏到这个窗口，以确保没有水平滚动，但真正的问题不是滚动，它是超过div而不是变小的文本。

最后的注意事项！

• 如果你检查css，那么＆＃34; -1rem margin＆＃34;在H1上，因为我 由于某些原因在这个特定的部分中说H1，就是这样， 没有中心。 H2和按钮居中，H1不是和 只有在这里......不明白为什么。

• 如果您尝试将窗口水平缩小，您可以看到文本首先触摸右侧的窗口（在小提琴和其他链接中没有html和正文边距） ，仍然无法理解为什么，我觉得这样做会阻止文本在变小时保持居中。

Answer 1

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

我认为一个解决方案是在http://andreacordioli.com/macwip2/css/includes.css中从第1047行开始调整你的CSS，如下所示：

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

希望这有帮助！