在响应式网站上工作时，文字会略微中断媒体查询

Question

我有一个单页的响应式网站，我正在努力。它在很大程度上适用于我想要的方式，但是在调整浏览器宽度时会出现文本中断的部分。

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

中断的文本是大标记行。它突破了780px浏览器宽度 - 由于某种原因，“挑战”这个词下降到下一行。无法弄清楚原因。

我已经在Chrome，Safari和Firefox中复制了这个内容。

Answer 1

当浏览器的宽度达到780px时，标语符号为font-size:50px，父符号.tencol为width:82.7%，标语符号被强制中断。在浏览器宽度为767px .tencol得到width:auto，这允许标语扩展一段时间，但随着浏览器继续缩小，标语再次中断。

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

像：  @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;}}

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