text - レスポンシブ サイトで作業すると、テキストがメディア クエリでわずかに壊れる

Question

私が取り組んでいる 1 ページのレスポンシブ サイトがあります。おおむね思い通りに動作しますが、ブラウザの幅を変更するとテキストが途切れる部分があります。

ウェブサイトはこちら:
http://vitaliyg.com

途切れるテキストは大きなタグラインです。ブラウザの幅が 780px あたりで壊れます。何らかの理由で、「チャレンジ」という単語が次の行にドロップダウンします。理由がわかりません。

これを Chrome、Safari、Firefox で複製しました。

Answer 1

ブラウザーの幅が約 780px になると、タグラインがfont-size:50pxあり、親 div .tencol がwidth:82.7%あり、タグラインが強制的に中断されます。ブラウザーの幅 767pxwidth:autoで .tencol を取得すると、タグラインをもう少し長く展開できますが、ブラウザーが縮小し続けると、タグラインが再び壊れます。

style.css では、h2 font-size のみが で宣言されてい@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;}}

結果に満足するまで、ブレークポイントを試してください。