小屏幕上的内容溢出/重叠弹性项目答案

【问题标题】：Content overflowing / overlapping flex items on smaller screens小屏幕上的内容溢出/重叠弹性项目
【发布时间】：2016-10-02 16:16:14
【问题描述】：

我正在使用 flexbox，我将每个部分的高度设置为 100vh。

每当我调整窗口大小时，第一部分和最后一部分的文本都会溢出到其他部分。

.banner, #showcase  {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container, .banner {
    width: 100%;
    height: 100vh;
}

http://codepen.io/mrfishball/pen/oLgLxX

【问题讨论】：

离题：你会想要在一两个周期后停止那个重复的人字形动画。如果你对我那样做，我会离开并且永远不会回来。 :)
更烦人的是，人字形的东西本身甚至无法点击，但你需要（在发现之后）使用它上面的“了解更多”链接。同意@isherwood，这个元素不应该是一个吸引注意力的人——看起来很绝望：p [...]
[...] 至于有问题的问题，我也建议采用按比例缩小的方法 - 退出时会在较小的屏幕上产生一些陈旧的效果。让元素的最小高度可能为 100vh（如果每个部分中有足够的内容来证明这一点），但如果有必要，让内容扩展它们。并且摆脱了滚动劫持 - 在桌面上已经够烦人了，在移动设备上通常很糟糕。

标签： html css flexbox

【解决方案1】：

在过去的几天里，我一直在为同样的问题苦苦挣扎，经过数小时的 Google 试验和错误，我想出了一个很好的解决方法来解决您的一个问题。我还在为定位而苦苦挣扎，所以我不打算谈这个，但弄清楚如何实现流畅的排版确实帮助我解决了溢出问题。

我不会尝试详细解释这一切，因为我在下面链接的资源做得更彻底，并且可能存在我不知道/误解的信息。

它的 TL;DR 是，您希望文本流畅地缩放到您的视口大小，而不是一堆媒体查询。以下是基本步骤，但首先是免责声明：

如果可能，请在您网站的沙盒版本上进行测试。您可能需要一段时间才能达到理想的印刷缩放比例，并且如果每隔几个，您就会对您的客户体验产生负面影响分钟文字大小改变。

将您的基本字体大小设置为 100%（在正文或 html 中，取决于您网站的设置方式）

html {font-size:100%;}

以 rem（不是 em）大小设置您的印刷层次结构（rem 使用基本字体大小，使数学更简单）。例如：

p { font-size: 1.25rem; }

h1 { font-size: 4rem; }

h2 { font-size: 3.25rem; }

h3 { font-size: 3.0rem; }

h4 { font-size: 2.75rem; }

h5 { font-size: 2.25rem; }

h6 { font-size: 1.75rem; }

添加以下两个媒体查询以启用文本的响应行为，并将大小设置为高于特定阈值：

@media only screen and (min-width: 10em) {

html {

    font-size: calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 1 */

    font-size: -webkit-calc(87.5% + 0.25 * (100vw - 8000%) / 40); /* 2 */

    font-size: -ms-calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 3 */

}

}

@media only screen and (min-width: 120em) {

html { font-size: 1.125em; }

}

还有，瞧！你应该有流畅的排版！您必须仔细浏览您的网站并确保没有任何东西覆盖您的 css（在我最终点击之前，引导程序搞砸了我几个小时，感谢 Google 开发人员侧边栏），并且您没有流氓 font-size声明弄乱了你漂亮的布局。如果您的网站干净并且排版布局合理，那么您应该可以继续使用<p>、<h1> 等标签，所有这些都将完全响应。

以下是我发现对解决这个问题非常有帮助的一些资源：

https://zellwk.com/blog/viewport-based-typography/ https://www.smashingmagazine.com/2016/05/fluid-typography/

【讨论】：

我认为你回答错了问题。 OP 讨论的是重叠问题而不是排版问题。

【解决方案2】：

您是否在内容重叠的部分尝试过overflow:hidden;？

【讨论】：

【解决方案3】：

您设置了这个height: 100vh;，这就是导致问题的原因。将其设置为 100%。

.container, .banner {
    width: 100%;
    height: 100%;
    /**border: 10px black solid;**/
}

我看到其他答案包括为子元素添加更多视口高度，但我认为这会带来更多麻烦。另外，它并不能完全解决重叠问题。我通常避免使用 vh 或 vw ，除非有必要实现它们无法完成的事情；例如，具有增强的进出动画的视差滚动或侧边导航。

要实现清晰、防弹的部分没有任何重叠，请使用height: 100%;

更新：由于积分不够，我无法发表评论，所以我在这里添加它。针对此评论“@StevenKwok，我更新了答案。您可以搜索更多有关响应能力和屏幕尺寸的信息”，这支持了我的观点，自找麻烦。如果您坚持使用 vh，那么您将需要在某些断点处添加媒体查询，包括小型笔记本电脑、平板电脑和移动设备。

【讨论】：

想解释一下为什么是-1？
我不是反对者，但我猜原因是您的解决方案不起作用。在演示中使用您建议的代码，会产生不同的布局。

【解决方案4】：

您可以将width : 100% 添加到.content

【讨论】：

【解决方案5】：

.banner, #showcase  {
    display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
    /**border: 10px blue solid;**/
overflow: hidden; /*or scroll*/
}

您可以控制不同设备屏幕尺寸的字体大小。例如：

@media only screen and (max-width: 500px) {
    .banner {
        font-size: 9px;
    }
}

【讨论】：

它有效，但有没有办法在窗口调整大小时自动调整字体大小？如果我切换到移动视图，第一节和最后一节的文本会填满 div。
@StevenKwok，我更新了答案。您可以搜索有关响应速度和屏幕尺寸的更多信息