text - 在响应式网站上工作，文本与媒体查询略有不同

Question

我正在开发一个单页响应式网站。它在很大程度上以我想要的方式工作，但是在调整浏览器宽度时有一部分文本会中断。

这是网站：http:
//vitaliyg.com

中断的文本是大标签行。它打破了大约 780 像素的浏览器宽度——“挑战”这个词由于某种原因下降到下一行。想不通为什么。

我已经在 Chrome、Safari 和 Firefox 中复制了这一点。

Answer 1

当浏览器获得大约 780 像素宽时，标语具有font-size:50px并且父 div .tencol 具有width:82.7%并且标语被迫中断。在浏览器宽度为 767px 时width:auto，.tencol 允许标语扩展一段时间，但随后随着浏览器继续缩小标语再次中断。

在您的 style.css 中，您只有用 . 声明的 h2 字体大小@media only screen and (min-width : 481px) and (max-height: 1280px)。您需要为 h2 font-size 添加额外的断点才能呼吸。

就像是： @media only screen and (min-width : 481px) and (max-width: 787px) { h2 {font-size:45px;}} @media only screen and (min-width: 788px) and (max-width: 1024px) { h2 {font-size:50px;}}

尝试使用断点，直到您对结果感到满意为止。